本文共 4893 字，大约阅读时间需要 16 分钟。

目录

---

前言

  目前编者已知有两种方法：1、修改MIME配置；2、动态修改参数配置。第一种时候设置关键字，比如说where ， select。第二种适合动态的表关联结构。

引入依赖

 

Html容器

 

内嵌JS编写

window.onload = function () {              var mime = 'text/x-flinksql';              this.editor = CodeMirror.fromTextArea(document.getElementById('code'), {                  mode: mime,   //指向引入的model/sql.js里面的'text/x-flinksql'【defineMime】                indentWithTabs: true,                  smartIndent: true,                  styleActiveLine: true,                  lineNumbers: true,                  lineWrapping: true,                  matchBrackets: true,                  autofocus: true,                  extraKeys: {"Ctrl-Space": "autocomplete"},  //              hintOptions的tables属性里面就是我们具体要提示的内容                hintOptions: {                      tables: sqlresult.data.filedArr                  }              });              this.editor.on("keyup", function (cm, event) {                  //所有的字母和'$','{','.'在键按下之后都将触发自动完成                  if (!cm.state.completionActive &&                          ((event.keyCode >= 65 && event.keyCode <= 90 ) || event.keyCode == 52 || event.keyCode == 219 || event.keyCode == 190)) {                      CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});                  }              });                };  

 

相关资源

按需引入

 

自动补全设置默认关键字

修改MIME配置

位置

        sql文件夹里面的sql.js

代码

//flinksql  CodeMirror.defineMIME("text/x-flinksql", {    name: "sql",    client: set("source"),    keywords: set("for null true false TUMBLE_ROWTIME MINUTE HOUR INTERVAL select from table with group by order and or DATE_FORMAT TIMESTAMP FROM_TIMESTAMP  FUNCTION VIEW INSERT  INTO WHERE JOIN HAVING DISTINCT ALL SUM UNION ALL PARTITION OVER AS DESC ASC COUNT SUBSTRING type project"),    builtin: set("VARCHAR INT BIGINT DOUBLE DATE BOOLEAN TINYINT SAMLLINT FLOAT DECIMAL VARBINARY"),    atoms: set("false true null"),    operatorChars: /^[*+\-%<>!=&|^\/#@?~]/,    dateSQL: set("time"),    support: set("decimallessFloat zerolessFloat binaryNumber hexNumber")  });});

 

设置Key关键字

 

效果：

 

自定义补全表联想

 

window.onload = function () {              var mime = 'text/x-flinksql';              this.editor = CodeMirror.fromTextArea(document.getElementById('code'), {                  mode: mime,                  indentWithTabs: true,                  smartIndent: true,                  styleActiveLine: true,                  lineNumbers: true,                  lineWrapping: true,                  matchBrackets: true,                  autofocus: true,                  extraKeys: {"Ctrl": "autocomplete"},  //              hintOptions的tables属性里面就是我们具体要提示的内容：key是表名称，value是字段                hintOptions: {                   completeSingle: false,                     tables: {                      csdn: ['cbry', 'like', 'follow'],				      blogChina: [],				      com: ['alibaba','uu','ireader']                  }                }              });              this.editor.on("keyup", function (cm, event) {                  //所有的字母和'$','{','.'在键按下之后都将触发自动完成                  if (!cm.state.completionActive &&                          ((event.keyCode >= 65 && event.keyCode <= 90 ) || event.keyCode == 52 || event.keyCode == 219 || event.keyCode == 190)) {                      CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});                  }              });                };  

 

 

效果

 

 

问题

属性设置无法直接识别变量,即动态数据表关联。

hintOptions里面的tables中，是否加""不要影响设置：

"csdn": ['cbry', 'like', 'follow']                        等价于               csdn: ['cbry', 'like', 'follow']

因素tables里面的参数是一个对象。

解决

 

直接赋予var新的对象，利用JS的对象操作进行动态赋值：

​​​

var sqlresult = {"data": {"csdn": ['cbry', 'like', 'follow'],"blogChina": [],"com": ['alibaba','uu','ireader']}};

 动态JS对象属性和值设置

利用这个也可以给codeMirror引入动态数据：tables[testStr] = testStrParams

js对象动态设置效果

2021.04.22

应用 

var mime = 'text/x-flinksql';      	var testStr = "Cbry_1";    	var testStrParams = ['csdn','leetcode',''];    	    	var test={};    	    	test[testStr] = testStrParams    	alert(JSON.stringify(test))    	    	this.editor = CodeMirror.fromTextArea(document.getElementById('sqlEditor'), {      	    mode: mime,      	    indentWithTabs: true,      	    smartIndent: true,      	    styleActiveLine: true,      	    lineNumbers: true,      	    lineWrapping: true,      	    matchBrackets: true,      	    autofocus: true,      	    extraKeys: {"Ctrl": "autocomplete"},      	//  hintOptions的tables属性里面就是我们具体要提示的内容：key是表名称，value是字段    	    hintOptions: {    		completeSingle: false,    	         tables:test    	}    	});    	    	    	this.editor.on("keyup", function (cm, event) {      	    //所有的字母和'$','{','.'在键按下之后都将触发自动完成      	    if (!cm.state.completionActive &&      	            ((event.keyCode >= 65 && event.keyCode <= 90 ) || event.keyCode == 52 || event.keyCode == 219 || event.keyCode == 190)) {      	        CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});      	    }      	});