codeMirror支持sql输入提示

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

1. 初始化

(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）需最先引入。

• 试试吧！

• 配置信息官网很全。