CodeMirror打造SQL在线编辑器
原文地址: https://bbs.huaweicloud.com/blogs/181064
前提
开始之前我们上首先看一下codemirror包结构，我们Demo接下来要使用的所有文件都在该包之中。
一、初始化编辑器
1）引入codemirror js库和css文件，本文为了方便使用的是cdn上的文件，项目中可使用npm i codemirror进行安装，或者下载codemirror压缩包到本地使用；
2）创建编辑器
生成codemirror需要制定一个dom容器，一般使用的textarea元素作为容器，codemirror提供了生成编辑器fromTextArea(dom, option)方法，该方法会返回一个codemirror实例。mode参数可指定语言类型，本文采用的是spark sql。
cosnt sqlEditor = CodeMirror.fromTextArea(document.getElementById("sqlEditor"), {
mode: "text/x-sparksql", // spark sql模式
lineNumbers: true, // 显示行号
});
完成以上步骤，即可打开浏览器看到效果，生成的原生编辑器是比较简陋的，我们可以自定义样式。
二、丰富编辑器功能
1）切换主题
codemirror支持多种主题，默认主题看起来非常不舒服，个人比较喜欢dracula主题，首先引用主题样式文件，option中指定theme: "dracula"
cosnt sqlEditor = CodeMirror.fromTextArea(document.getElementById("sqlEditor"), {
mode: "text/x-sparksql", // spark sql模式
lineNumbers: true, // 显示行号
theme: "dracula",
});
2）代码高亮和智能提示
一款编辑器没有代码高亮和关键字提示功能是没有灵魂的，严重影响工作效率。下面我们来实现代码高亮和智能提示，
智能提示的实现思路是通过按键的值来判断哪些键需要进行提示，codemirror提供了keyup事件，实现如下：
sqlEditor.on('keyup', (cm, event) => {
if (event.keyCode >= 65 && event.keyCode <= 90){
cm.showHint();
}
});
sql中表名和列名联想可通过hintOptions进行实现：
var sqlEditor = CodeMirror.fromTextArea(document.getElementById("sqlEditor"), {
mode: "text/x-sparksql", // spark sql模式
lineNumbers: true, //显示行号
theme: "dracula", //设置主题
hintOptions: {
tables: {
table1_xxx: [],
table2_xxx: ['id', 'name']
}
},
});
3）快捷键设置
codemirror可自定义快捷键，比如使用快捷键格式化代码，Tab键自动补全，实现如下
var sqlEditor = CodeMirror.fromTextArea(document.getElementById("sqlEditor"), {
mode: "text/x-sparksql", // spark sql模式
lineNumbers: true, //显示行号
theme: "dracula", //设置主题
extraKeys: {
"Tab": "autocomplete", // tab键自动补全
'Ctrl-F': formatSQL, // Ctrl+F 实现格式化
},
hintOptions: {
tables: {
table1_xxx: [],
table2_xxx: ['id', 'name']
}
},
});
4）自定义关键字高亮
// 自定义关键字高亮显示
const SQL_CUSTOM_KEYWORDS = ['color', 'datasource'];
SQL_CUSTOM_KEYWORDS.forEach(words => {
CodeMirror.resolveMode("text/x-sparksql").keywords[words] = true;
});
更多功能就不一一详细说了，附上demo效果图和代码图
参考资料
codemirror官网：https://codemirror.net/index.html
github源码：https://github.com/codemirror/CodeMirror