ngx-ace-icy

angular ace编辑器

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

开始使用

• 安装
• 使用
• API

安装

npm i ngx-ace-icy

使用

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

修改angular.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" // 主题样式文件
            ]
        }
      }
    }
  }
}

项目引入

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

/**
 * 以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 { }

/**
 * AppComponent
 */
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
    // 普通使用方式
    <c-ngx-ace
  [options]="aclOptions"
  [text]="aceText"
  (textChange)="textChange($event)"
  ></c-ngx-ace>
    // ngModel 使用
    <c-ngx-ace
  [options]="aclOptions"
  [(ngModel)]="aceText"
  (ngModelChange)="textChange($event)"
  ></c-ngx-ace>
    `
})
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);
  }
}

Api说明

名称	说明	类型	必填	默认值
[options]	ace的配置信息.具体参考ace api	object	false	-
[placeholder]	为空时的内容提示信息	string	false	请输入内容
[style]	样式	object	false	-
[readOnly]	是否为只读	boolean	false	false
[theme]	使用主题，ace官网主题，也可自行开发主题。	string	fasle	monokai
[mode]	语言模式，ace官方模式，也可以自行开发。	string	false	sql
[(text)]	文本内容，可进行双向 绑定。非form表单模式下可以使用。	string	false	-
(textChange)	text文本更改后的回调。	EventEmitter<string>	false	-
[(ngModel)]	angular表单属性。与[(text)]互斥	string	false	-
[ngModelChange]	ngModel内容更改后的回调	EventEmitter<string>	false	-