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文件后需要重啟項目), 預覽