目录
前言
目前编者已知有两种方法：1、修改 MIME 配置；2、动态修改参数配置。第一种时候设置关键字，比如说 where ， select。第二种适合动态的表关联结构。
引入依赖
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="/lib/codemirror.css">
Html 容器
<template>
<textarea id="mycode" class="codesql" v-model="code" style="height:200px;width:600px;border: red solid 2px;"></textarea>
</template>
内嵌 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});
}
});
};
相关资源
按需引入
<script src="../../js/codemirror/lib/codemirror.js"></script>
<script src="../../js/codemirror/mode/sql/sql.js"></script>
<link rel="stylesheet" href="../../js/codemirror/addon/hint/show-hint.css"/>
<script src="../../js/codemirror/addon/hint/show-hint.js"></script>
<script src="../../js/codemirror/addon/hint/sql-hint.js"></script>
<script src="../../js/codemirror/addon/selection/active-line.js"></script>
自动补全设置默认关键字
修改 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 对象属性和值设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
var obj={};
obj["name"] = "cbrj";
//动态值赋予对象
var url = "webUrl";
var webUrl = "https://blog.csdn.net/qq_37334150";
obj[url] = webUrl;
console.log("JS对象名称： " + obj.name)
console.log("编者的博客链接： " + obj.webUrl)
</script>
<body>
</body>
</html>
利用这个也可以给 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});
}
});