1. 安装ng2-codemirror包、codemirror包
npm install ng2-codemirror — save
npm install codemirror — save
2. 在所需要使用codemirror组件的模块中引入CodeMirror模块
import {CodemirrorModule} from ‘ng2-codemirror’;
@NgModule({
imports: [
CodemirrorModule
],
3. 在组件html模板文件中使用codemirror组件
// demo.component.html
[(ngModel)]=”code”
[config]=”cmOptions”>
4. 在组件ts文件中定义codemirror组件所需要的变量; 和引入codemirror组件所需的js文件
// demo.component.ts
// 1. 引入js文件
import * as CodeMirror from ‘codemirror’;
import ‘codemirror/mode/sql/sql.js’;
import ‘codemirror/addon/hint/show-hint.js’;
import ‘codemirror/addon/hint/sql-hint.js’;
export class DemoComponent {
// 2. 定义CodeMirror组件所需要的变量
sqlData: any = ”; // 双向绑定，获取输入的sql语句
cmOptions: any = { // codemirror组件的配置项
lineNumbers: true, // 显示行号
styleActiveLine: true, // 当前行背景高亮
lineWrapping: true, // 自动换行
mode: { name: ‘text/x-mysql’ }, // 定义mode
theme: ‘ambiance’, // 设置黑色主题
extraKeys: {
‘Ctrl’: ‘autocomplete’, // 提示快捷键
Tab: function (cm) {
const spaces = Array(cm.getOption(‘indentUnit’) + 1).join(‘ ‘);
cm.replaceSelection(spaces);
}
}, // 自动提示配置
};
}
5. 还需要引入codemirror所需要的css文件
// angular.json
“styles”: [
“node_modules/codemirror/lib/codemirror.css”, // 基本样式
“node_modules/codemirror/addon/hint/show-hint.css”, // 提示框样式
“node_modules/codemirror/theme/ambiance.css”, // 对应配置主题的css文件
],
6. 重启项目(修改完angular.json文件后需要重启项目), 预览
