基于CodeMirror的一个在线sql编辑工具

js在线sql编辑器,下载后导入IDE工具中,在浏览器访问sql-editor-master/index.html ,效果如下(含括号高亮显示、显示折叠栏):基于CodeMirror的一个在线sql编辑工具_第1张图片

基于CodeMirror的一个在线sql编辑工具_第2张图片

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


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    

    


核心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"
        ]
    }

 

 

你可能感兴趣的:(jsp页面脚本)