sqleditor

Ⅰ oracle鏁版嵁搴撴庝箞镓揿紑sql绐楀彛锛堣緭鍏ユ煡澶勮鍙ワ级

1銆佸畨瑁呭苟镓揿紑toad鍙瑙嗗寲宸ュ叿銆

Ⅱ 如何采用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 = {"al": []};
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"
]
}

Ⅲ 鍦∣racle浣跨敤sql璇鍙ヤ腑濡备綍鎻掑叆镞ユ湡镙煎纺镄勬暟鎹

1銆佽緭鍏ユ湇锷″櫒鍦板潃銆佹暟鎹搴撶橱褰旷敤鎴峰悕銆佺橱褰曞瘑镰侊纴瀹屾垚鏁版嵁搴撶橱褰曟搷浣溿