angular ace编辑器

基于angular9、ace-builds构建的ace编辑器组件。demo地址

开始使用

`使用`

安装成功后需要在项目中引入对应的ace的模式、主题文件。比如：需要的时sql语言：

`$3`

`json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "ace-test": { ... "architect": { "builder": { .... "scripts": [ "./node_modules/ace-builds/src-min/ace.js", // ace 核心文件 "./node_modules/ace-builds/src-min/mode-sql.js", // sql 模式文件 "./node_modules/ace-builds/src-min/snippets/sql.js", // sql 模式部分文件 "./node_modules/ace-builds/src-min/theme-monokai.js" // 主题样式文件 ] } } } } }`

`$3`

NgxAceModule应该在AppModule中使用或通用的module模块中便于任何模块方便使用。

`typescript /** * 以AppModule引入为例 */ import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core';

import { NgxAceModule } from 'ngx-ace-icy'; // 引入

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, AppRoutingModule, NgxAceModule, // 导入模块 ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }`

`typescript /** * AppComponent */ import { Component, OnInit } from '@angular/core';

@Component({ selector: 'app-root', template:
// 普通使用方式
[options]="aclOptions"
[text]="aceText"
(textChange)="textChange($event)"
>
// ngModel 使用
[options]="aclOptions"
[(ngModel)]="aceText"
(ngModelChange)="textChange($event)"
>
}) export class AppComponent implements OnInit { / ace 配置 / public aclOptions = { enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, showGutter: false, maxLines: 3, minLines: 4, autoScrollEditorIntoView: false, }; / ace 内容 / public aceText = ''; constructor() { }

ngOnInit() { } /* ace 内容更改的回调函数 / public textChange(value): void { console.log(value); } }`

`$3`

angular ace编辑器

基于angular9、ace-builds构建的ace编辑器组件。demo地址

开始使用

- 安装
- 使用
- API

安装

``bash npm i ngx-ace-icy`

`使用`

安装成功后需要在项目中引入对应的ace的模式、主题文件。比如：需要的时sql语言：

`$3`

NgxAceModule应该在AppModule中使用或通用的module模块中便于任何模块方便使用。

import { NgxAceModule } from 'ngx-ace-icy'; // 引入

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';

`typescript /** * AppComponent */ import { Component, OnInit } from '@angular/core';

ngOnInit() { } /* ace 内容更改的回调函数 / public textChange(value): void { console.log(value); } }`

`$3`