【web】CodeMirror打造SQL在线编辑器
前提
开始之前我们上首先看一下codemirror包结构,我们Demo接下来要使用的所有文件都在该包之中。
一、初始化编辑器
1)引入codemirror js库和css文件,本文为了方便使用的是cdn上的文件,项目中可使用npm i codemirror进行安装,或者下载codemirror压缩包到本地使用;
<link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/codemirror.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/codemirror.js"></script> <!--sql语言--> <script src="https://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。
<textarea id="sqlEditor"></textarea>
cosnt sqlEditor = CodeMirror.fromTextArea(document.getElementById("sqlEditor"), { mode: "text/x-sparksql", // spark sql模式 lineNumbers: true, // 显示行号 });
完成以上步骤,即可打开浏览器看到效果,生成的原生编辑器是比较简陋的,我们可以自定义样式。
二、丰富编辑器功能
1)切换主题
codemirror支持多种主题,默认主题看起来非常不舒服,个人比较喜欢dracula主题,首先引用主题样式文件,option中指定theme: "dracula"
<link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/theme/dracula.css" rel="stylesheet">
cosnt sqlEditor = CodeMirror.fromTextArea(document.getElementById("sqlEditor"), { mode: "text/x-sparksql", // spark sql模式 lineNumbers: true, // 显示行号 theme: "dracula", });
2)代码高亮和智能提示
一款编辑器没有代码高亮和关键字提示功能是没有灵魂的,严重影响工作效率。下面我们来实现代码高亮和智能提示,
<!--代码高亮--> <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/addon/hint/show-hint.js"></script> <!--sql提示--> <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.54.0/addon/hint/sql-hint.js"></script>
智能提示的实现思路是通过按键的值来判断哪些键需要进行提示,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键自动补全,实现如下
<script src="https://cdn.bootcdn.net/ajax/libs/sql-formatter/2.3.3/sql-formatter.js"></script>
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
- 点赞
- 收藏
- 关注作者
评论(0)