您的位置:首页 > 数据库

codeMirror支持sql输入提示

2017-08-15 12:48 399 查看

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

试试吧!

配置信息官网很全。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐