【web】CodeMirror打造SQL在线编辑器

举报
Marvel_Groot 发表于 2020/07/04 18:56:03 2020/07/04
【摘要】 华为云很多大数据服务都涉及在线SQL编辑场景,比如数据湖探索 服务,简称DLI。DLI支持标准SQL/Spark SQL/Flink SQL,仅需使用SQL就可以完成大数据处理工作,那么如何快速的搭建SQL在线编辑器呢?本文将使用CodeMirror搭建Spark SQL在线编辑器,CodeMirror是一款在线的开源的编辑器,覆盖各种语法,官网demo齐全,简单灵活易上手。

前提

开始之前我们上首先看一下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





【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。