基於CodeMirror的一個在線sql編輯工具

js在線sql編輯器，下載後運行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"
        ]
    }