CodeMirror打造SQL在线编辑器


前提

开始之前我们上首先看一下codemirror包结构，我们Demo接下来要使用的所有文件都在该包之中。

一、初始化编辑器

1）引入codemirror js库和css文件，本文为了方便使用的是cdn上的文件，项目中可使用npm i codemirror进行安装，或者下载codemirror压缩包到本地使用；

1
2
3
4
<link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/codemirror.css" rel="stylesheet">
<script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/codemirror.js"></script>
<!--sql语言-->
<script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/mode/sql/sql.js"></script>

2）创建编辑器

生成codemirror需要制定一个dom容器，一般使用的textarea元素作为容器，codemirror提供了生成编辑器fromTextArea(dom, option)方法，该方法会返回一个codemirror实例。mode参数可指定语言类型，本文采用的是spark sql。

1
<textarea id="sqlEditor"></textarea>

1
2
3
4
cosnt sqlEditor = CodeMirror.fromTextArea(document.getElementById("sqlEditor"), {
    mode: "text/x-sparksql", // spark sql模式
    lineNumbers: true,  // 显示行号
 });

完成以上步骤，即可打开浏览器看到效果，生成的原生编辑器是比较简陋的，我们可以自定义样式。

二、丰富编辑器功能

1）切换主题

codemirror支持多种主题，默认主题看起来非常不舒服，个人比较喜欢dracula主题，首先引用主题样式文件，option中指定theme: "dracula"

1
<link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/theme/dracula.css" rel="stylesheet">

1
2
3
4
5
6
cosnt sqlEditor = CodeMirror.fromTextArea(document.getElementById("sqlEditor"), {
    mode: "text/x-sparksql", // spark sql模式
    lineNumbers: true,  // 显示行号
    theme: "dracula",
   
 });

2）代码高亮和智能提示

一款编辑器没有代码高亮和关键字提示功能是没有灵魂的，严重影响工作效率。下面我们来实现代码高亮和智能提示，

1
2
3
4
<!--代码高亮-->
<script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/addon/hint/show-hint.js"></script>
<!--sql提示-->
<script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/addon/hint/sql-hint.js"></script>

智能提示的实现思路是通过按键的值来判断哪些键需要进行提示，codemirror提供了keyup事件，实现如下：

1
2
3
4
5
sqlEditor.on('keyup', (cm, event) => {
    if (event.keyCode >= 65 && event.keyCode <= 90){
        cm.showHint();
    }
});

sql中表名和列名联想可通过hintOptions进行实现：

1
2
3
4
5
6
7
8
9
10
11
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键自动补全，实现如下

1
<script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/sql-formatter/2.3.3/sql-formatter.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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）自定义关键字高亮

1
2
3
4
5
// 自定义关键字高亮显示
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