在Angular、Ng-Alain项目中使用ACE代码编辑器第三方组件

Angular项目中使用第三方组件嵌入代码编辑器

• 最近遇到一个需求，不仅需要展示源代码（不同环境下不同的环境配置代码），且可供修改，并且要监听修改后的配置代码，用户点击保存还需要将修改后的代码发送给后端。一开始使用 < pre> 标签，然后通过*ngFor指令将源代码拆开在 < span> 标签中展示，并设置contentEditable和 content: counter(line);的CSS样式实现，但后续发现还有很多问题，比如点击回车不能自动改变行号，会失去焦点等等，后面决定还是找找看看有没有第三方组件可以用一下。
• 找了特别久，全部都是AngularJs的第三方插件，在Ng-Alain项目中使用不了，快要无计可施的时候才找到了ng2-ace-editor这个字眼，之后终于找到了可以使用的第三方组件。一开始也找到了ngx-ace，但是一导入项目，各种报错，把我之前的依赖包node_modules都搞得一塌糊涂，所以一开始以为用不了。所以要在自己的项目中使用要特别小心，之后我是删除掉项目中的node_modules文件，重新安装依赖就可以了，不过还是要谨慎。
• 此处附上两个第三方插件NPM包地址（后面会介绍）：
  ng2-ace-editor
  ngx-ace

第三方插件ng-ace-editor、ngx-ace在Angular项目中的使用

因为有过一次直接在自己的项目中导入第三方插件导致项目启动不了的经历，我就新建了一个全新的Angular项目来实验这两个插件到底能不能使用，试验的过程很简单，几乎完全按照以上我发的两个链接中说的步骤：

第一步：使用指令 npm i -S ng2-ace-editor 安装依赖（使用ngx-ace同理，输入 npm i --save @nowzoo/ngx-ace）

第二步：将 AceEditorModule 导入到 AppModule 中

//这个是ng2-ace-editor的AppModule文件代码
import { AceEditorModule } from 'ng2-ace-editor';
 
@NgModule({
  ...
  imports: [
    ...
    AceEditorModule
  ]
})

//这个是ngx-ace的AppModule文件代码
import { NgxAceModule } from '@nowzoo/ngx-ace';
// ...
@NgModule({
  imports: [
    NgxAceModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

第三步 ：之后就可以直接使用了，代码如下：
（1）HTML代码：

<h2>Test 植入代码编辑器</h2>

<!-- ng-ace-editor 的第一种用法，是使用他的样式 -->
<!-- 内含很多属性，但是我还不了解，之后如果有了解再做更新分享-->
<div ace-editor [(text)]="text" [mode]="'sql'" [theme]="'eclipse'" [options]="options" [readOnly]="false"
  [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="onChange($event)"
  style="min-height: 200px; width:100%; overflow: auto;"></div>
  
<!-- ng-ace-editor 的第二种用法，是直接使用组件 -->
<ace-editor [(text)]="text" #editor style="height:100%;width: 85%;min-height: 500px;font-size: 14px;"></ace-editor>

<!-- ngx-ace 的用法，也是直接使用组件，但是我是用文档中的[（ngModel）] = “ content ” 进行双向绑定会报错 -->
<div class="my-ace-wrapper">
  <ngx-ace #ace (ready)="onEditorReady($event)" style="background-color: black;color: #fff;font-size: 14px"></ngx-ace>
</div>

（2）Typescript代码：

export class AppComponent {
  text: string = '';
  options: any = { maxLines: 1000, printMargin: false };

  onChange(code) {
    console.log('new code', code);
  }

  @ViewChild('editor', { static: false }) editor;

  ngAfterViewInit() {
    this.editor.setTheme('eclipse');

    this.editor.getEditor().setOptions({
      enableBasicAutocompletion: true
    });

    this.editor.getEditor().commands.addCommand({
      name: 'showOtherCompletions',
      bindKey: 'Ctrl-.',
    });
  }

  content = 'Hello World';
  editor2: any;

  onEditorReady(editor) {
    // editor is an instance of Ace.Editor
    this.editor2 = editor;
    this.editor2.setOptions({
      mode: 'ace/mode/markdown',
      theme: 'ace/theme/github'
    });
  }

  clear() {
    this.text = '';
  }
}

使用的效果按上面代码的顺序(后续有主题，模式设置，可实现编辑器不同的主题和模式)：

第一种：使用 ng2-ace-editor 的样式 实现效果图（特点是代码越长，这个div元素被撑的越高，代码全部展示）

第二种：使用 ng2-ace-editor 的组件 实现效果图（特点是代码越长，这个组件的宽度依然固定，超过编辑器高度组件右侧会有滑轮，代码通过滑轮能全部展示）

第三种：使用 ngx-ace 的组件 实现效果图（特点是复制进去的代码有的有高亮的效果，相对前两种更美观，但是一旦超过了改组件的高度，行号和代码都会消失不展示了，这个尚未解决，所以我自己暂时选择前两种中的一种使用）

至此，在Angular项目中嵌入代码编辑器就分享完了。以下是在Ng-Alain中使用的分享，因为按照上面的步骤在自己的Ng-Alain项目中照搬完全不行。

第三方插件ng-ace-editor、ngx-ace在Ng-Alain项目中的使用

成功在新的Angular项目中实现功能，喜不自胜，赶紧npm install到自己的项目中，靠，项目又崩了，两个第三方插件让我项目又崩了好几次，只能删掉node_modules文件，然后 yarn 重新安装依赖，所以在项目中使用一定要小心。

使用两个项目的 npm i -S ng2-ace-editor 、npm i --save @nowzoo/ngx-ace都会使我的项目崩掉，因为之前有了导入第三方类库富文本编辑器的经验（在ng-alain项目中使用富文本组件ngx-tinymce（包括汉化+图片上传）），我就不再直接使用npm install什么的，而是先在成功的示例的package.json文档中找到了相关依赖，并直接复制到我自己项目中的package.json的依赖里： “ng2-ace-editor”: “^0.3.9”，再次使用 yarn 自动安装依赖，终于成功导入。赶紧到项目中试验，发现组件或者是样式所有的属性都没有报错，项目也能成功启动，但是到了进入代码编辑器相关的界面控制台一堆报错，各种什么什么属性不是div元素的属性，ace-editor不是组件等等。之后才想起来，在Ng-Alain项目中使用第三方类库，还要在 SharedModule 模块中导入和导出他。

import {AceEditorModule} from "ng2-ace-editor";
const THIRDMODULES = [ AceEditorModule];

至此，大功告成。

补充（设置编辑器的主题和模式）

最终我选择了第一种实现方式，使用的ace-editor的样式，但是我又想用第二种或者第三种编辑器实现方式的主题，而且想实现代码高亮。这时候，该编辑器的mode属性和theme属性就发挥作用了。
我们需要在项目的 angular.json 文件中 scripts 中导入主题和模式：

            "scripts": [
              "node_modules/ace-builds/src-min/ace.js",
              "node_modules/ace-builds/src-min/theme-clouds_midnight.js",
              "node_modules/ace-builds/src-min/mode-yaml.js",
              "node_modules/ace-builds/src-min/mode-json.js"
            ],

之后就可以设置我们编辑器的主题和模式了，在我们 node_modules/ace-builds/src-min 目录下还有很多的主题和模式，比如JSON等等，可供我们自己选择。之后就可以在编辑器中使用：

<div ace-editor *ngIf="codeMode" [(text)]="code" [mode]="'yaml'" [theme]="'clouds_midnight'" 
         [readOnly]="false"
         [autoUpdateContent]="true" [durationBeforeCallback]="1000"
         style="min-height: 300px; width:100%; overflow: hidden;font-size: 14px"></div>

设置完主题和模式后效果图：

本文地址：https://blog.csdn.net/secretbase12138/article/details/107375814