angular6+codeMirror实现浏览器在线SQL编辑器并支持智能提示

前言：

因为我司是一个做大数据的公司，要给数据科学家们做一个在线探索数据的产品，近来有一个在线写SQL代码的需求。话不多说，开始：

依赖：

    使用npm包安装ng2-codemirror组件：

npm install ng2-codemirror -- save

因为该组件需要codemirror，所以需要再安装codemirror的依赖

npm install codemirror -- save

好啦，所有的依赖都装好了。

使用：

在需要使用的组件的module中引入ng2-codemirror：

import { CodemirrorModule } from 'ng2-codemirror';

@NgModule({
  imports: [
    CodemirrorModule
  ]
})

接下来就可以在组件中直接使用codemirror了！

import { Component } from 'angular2/core';

@Component({
  selector: 'sample',
  template: `
    
    
  `
})

export class Sample{
  constructor(){
   private code: any = '';
   private cmOptions: any = '';
  }
}

至此，codemirror就算集成到angular中了。但是，你会发现一个问题，codemirror的样式不见啦！！！这可咋办，别急，我们需要引入codemirror的css文件。但是此时又发现没法直接在ts文件中引入node_module中的css文件。

所以我选择在在根目录的angular.json作为静态资源引入全局。

"styles": [
  "node_modules/codemirror/lib/codemirror.css"
]

引入完之后发现，纳尼，怎么不起作用。仔细一想，引入静态资源需要重跑项目。项目重跑之后发现，OK了。接下来就需要支持sql输入。

我们在使用codemirror的组件中引入：

import * as CodeMirror from 'codemirror';
import 'codemirror/mode/sql/sql';
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/sql-hint.js';

然后将codemirror的参数加上：

export class Sample{ 
   constructor(){ 
    private code: any = '';
    private cmOptions: any = {
      lineNumbers: true,                     //显示行号
      mode: { name: "text/x-mysql" },          //定义mode
      extraKeys: {
        "'a'": this.completeAfter,
        "'b'": this.completeAfter,
        "'c'": this.completeAfter,
        "'d'": this.completeAfter,
        "'e'": this.completeAfter,
        "'f'": this.completeAfter,
        "'g'": this.completeAfter,
        "'h'": this.completeAfter,
        "'i'": this.completeAfter,
        "'j'": this.completeAfter,
        "'k'": this.completeAfter,
        "'l'": this.completeAfter,
        "'m'": this.completeAfter,
        "'n'": this.completeAfter,
        "'o'": this.completeAfter,
        "'p'": this.completeAfter,
        "'q'": this.completeAfter,
        "'r'": this.completeAfter,
        "'s'": this.completeAfter,
        "'t'": this.completeAfter,
        "'u'": this.completeAfter,
        "'v'": this.completeAfter,
        "'w'": this.completeAfter,
        "'x'": this.completeAfter,
        "'y'": this.completeAfter,
        "'z'": this.completeAfter,
        "'.'": this.completeAfter,
        // "'='": this.completeIfInTag,
        "Ctrl-Enter": "autocomplete",
        Tab: function (cm) {
          var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
          cm.replaceSelection(spaces);
        }
      },   //自动提示配置
    };
  } 
}

好了，此时就可以愉快的写SQL了。还支持智能提示哟，支持回车键 和 TAB键。下面贴出效果图：

 

-------END-------

转载于:https://my.oschina.net/u/3032812/blog/1837762