Angular6 CodeMirror在线编辑sql 智能提示

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

<codemirror 
      [(ngModel)]="code"
      [config]="cmOptions">
</codemirror>

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文件后需要重启项目),预览