codeMirror支持sql输入提示

来源：互联网发布：网络剧申请流程编辑：程序博客网时间：2024/06/09 20:23

codeMirror 是一款非常不错的在线代码编辑插件。现在简单介绍对sql编辑的支持。

初始化

(function (){            window.top._editor = CodeMirror.fromTextArea($("#codeTypeArea")[0], {                mode: 'text/x-sql',                indentWithTabs: true,                smartIndent: true,                lineNumbers: true,                matchBrackets: true,                autofocus: false,                styleSelectedText: true,                extraKeys: {                    "'a'": completeAfter,                     "'b'": completeAfter,                     "'c'": completeAfter,                     "'d'": completeAfter,                     "'e'": completeAfter,                     "'f'": completeAfter,                     "'g'": completeAfter,                     "'h'": completeAfter,                     "'i'": completeAfter,                     "'j'": completeAfter,                     "'k'": completeAfter,                     "'l'": completeAfter,                     "'m'": completeAfter,                     "'n'": completeAfter,                     "'o'": completeAfter,                     "'p'": completeAfter,                     "'q'": completeAfter,                     "'r'": completeAfter,                     "'s'": completeAfter,                     "'t'": completeAfter,                     "'u'": completeAfter,                     "'v'": completeAfter,                     "'w'": completeAfter,                     "'x'": completeAfter,                     "'y'": completeAfter,                     "'z'": completeAfter,                     "'.'": completeAfter,                    "'='": completeIfInTag,                    // ,                    // "Ctrl-Space": "autocomplete",                    "Ctrl-Enter": "autocomplete",                    Tab: function(cm) {                        var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");                        cm.replaceSelection(spaces);                    }                }            });            function completeIfInTag(cm) {                return completeAfter(cm, function() {                    var tok = cm.getTokenAt(cm.getCursor());                    if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false;                    var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;                    return inner.tagName;                });            }            function completeAfter(cm, pred) {                var cur = cm.getCursor();                if (!pred || pred()) setTimeout(function() {                    if (!cm.state.completionActive)                        cm.showHint({                            completeSingle: false                        });                }, 100);                return CodeMirror.Pass;            }            window.top._editor.on('change', function() {            });            window.top._editor.setSize("100%",110);            window.top._editor.refresh();//动态设置或浏览器变动后保证editor的正确显示        })()

mode：对某种语言的支持，我们这里选择SQL。更多语言支持参考官网
文件引入：codemirror.js、placeholder.js、sql.js、show-hint.js、sql-hint.js、show-hint.css、codemirror.css。主框架（codemirror.js）需最先引入。
试试吧！
配置信息官网很全。

阅读全文

1 0