angular中使用Ace编辑器

原文网址
angular中使用Ace编辑器
首先使用下方命令安装ace

npm i --save @nowzoo/ngx-ace

导入（注意，若是组件较多，不仅要在app.module.ts中引入，还要在该组件下方的module.ts文件中导入）

import { NgxAceModule } from '@nowzoo/ngx-ace';
// ...
@NgModule({
  imports: [
    NgxAceModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在组件中使用

export class MyComponent  {
  content = 'Hello World';
  editor: any;
  onEditorReady(editor) {
    // editor is an instance of Ace.Editor
    this.editor = editor;
    this.editor.setOptions({
      mode: 'ace/mode/markdown',
      theme: 'ace/theme/github'
    });
  }
}

<!-- my.component.html -->
<div class="my-ace-wrapper">
  <ngx-ace [(ngModel)]="content" (ready)="onEditorReady($event)"></ngx-ace>
</div>

注意：

1. 要给ace编辑器一个宽和高，否则ace编辑器可能显示不出来
2. 显示出来的json数据格式可能不好看，要转换一下格式this.content=JSON.stringify(原数据, null, 3)