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>

来源：CSDN

作者：静沐静好

链接：https://blog.csdn.net/Sunshine__Girl/article/details/103913219