因为有过一次直接在自己的项目中导入第三方插件导致项目启动不了的经历，我就新建了一个全新的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项目中照搬完全不行。
成功在新的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
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
网友评论