如何采用element-plus，基于codemirror6实现sql在线编辑器？

js在线sql编辑器，下载后导入IDE工具中，在浏览器访问sql-editor-master/index.html ，效果如下(含括号高亮显示、显示折叠栏)：

codeMirror官网https://codemirror.net/， 官网js/css资源文件，也可自行去官网下载，但是官网比较慢，需引入的核心页面代码：

<link rel="stylesheet" href="css/codemirror.css" />

<link rel="stylesheet" href="test/addon/fold/foldgutter.css">

<link rel="stylesheet" href="css/theme/dracula.css" />

<link rel="stylesheet" href="css/show-hint.css" />

<link rel="stylesheet" href="js/jquery-easyui/themes/default/easyui.css">

<link rel="stylesheet" href="js/layui/css/layui.css">

<link rel="stylesheet" href="css/index.css" />

<script type="text/javascript">var baseUrl =""</script>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript" src="js/editor/codemirror.js"></script>

<!-- 折叠栏显示 -->

<script type="text/javascript" src="test/addon/fold/foldcode.js"></script>

<script type="text/javascript" src="test/addon/fold/foldgutter.js"></script>

<script type="text/javascript" src="test/addon/fold/comment-fold.js"></script>

<!-- 括号高亮匹配 -->

<script type="text/javascript" src="test/addon/fold/matchbrackets.js"></script>

<script type="text/javascript" src="js/editor/sublime.js"></script>

<script type="text/javascript" src="js/editor/sql.js"></script>

<script type="text/javascript" src="js/editor/sql-hint.js"></script>

<script type="text/javascript" src="js/editor/show-hint.js"></script>

<!-- sql格式 -->

<script type="text/javascript" src="js/editor/formatting.js"></script>

<script type="text/javascript" src="js/editor/sql-formatter.min.js"></script>

<script type="text/javascript" src="js/layui/layui.js"></script>

<script type="text/javascript" src="js/index.js"></script>

<textarea id="code"></textarea>

核心js代码：

//根据DOM元素的id构造出一个编辑器

var editor=CodeMirror.fromTextArea(document.getElementById("code"),{

mode:"text/c-mysql", //实现Java代码高亮

lineNumbers:true,

matchBrackets: true, //括号高亮匹配

theme:"default",

keyMap: "default",

extraKeys:{"Tab":"autocomplete"},

hint: CodeMirror.hint.sql,

lineWrapping: true, //是否换行

foldGutter: true, //是否折叠

gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], //添加行号栏，折叠栏

hintOptions: {

tables: tablewords

}

})

输入关键词提示等信息的配置：allWords.json

动态设置表字段等信息：

let tableWords = {"dual": []}

let tableName = "tn_user"

tableWords[tableName].push("userId")

editor.setOption("hintOptions", {"tables": tableWords})

tableWords json格式如下：

"tableWords": {

"cp_sku": [

"skuid",

"cpbh",

"tcbh"

],

"user_info": [

"user_id",

"user_token",

"user_name",

"user_type",

"password"

]

}

Toad for MySQL是一款免费开发工具，可让您快速高效地创建和执行查询、自动执行数据库对象管理，并开发SQL代码。Toad MySQL可提供实用程序，用于比较、提取和搜索对象。MySQL工具还可让您录制和播放键盘命令，并在MySQL数据库之间传输数据。MySQL开发人员工具可帮助管理项目、导入/导出数据和管理数据库，从而提高您的效率。

Toad™ for MySQL可提供以下重要功能：

版本控制集成

让您能够在编辑器中对代码进行登入和登出，从而降低错误风险。

宏录制和播放

使您可以录制和播放键盘命令。

数据库浏览器

重新安排和管理对象及对象类型。

代码片段编辑器

让您能够创建和修改代码片段，以扩展和折叠代码块，从而加快浏览速度。

安全管理器

通过允许或限制用户访问特定Toad功能，让您能够更好地控制系统。

SQL编辑器

让您可以创建、执行、修改和保存查询；查看和编辑数据；以及从一个直观的界面处理DDL命令。

快速的多标签模式浏览器

以图形的形式显示并管理数据库对象。

数据库提取、比较和搜索实用程序

允许您对两个MySQL数据库进行比较，查看差异，及创建脚本来更新目标。

导入/导出实用程序 - 让您能够在MySQL数据库之间传输数据。

---