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 | - |