CodeMirror SQL智能提示功能的使用、源码解析与改写，使之支持Oracle的使用习惯

最近公司项目，需要用到Codemirror编辑器来实现一个网页版的OracleSQL编辑器。但Codemirror的提示功能只支持到 表.列 这种级别的提示，不支持Oracle常用的 用户.表.列 的提示，所以进行改写。

先简单介绍一下Codemirror的使用方式：

<link rel="stylesheet" href="codemirror-5.39.2/lib/codemirror.css" />
<link rel="stylesheet" href="codemirror-5.39.2/addon/hint/show-hint.css" />
<link rel="stylesheet" href="codemirror-5.39.2/theme/eclipse.css" />
<script type="text/javascript" src="codemirror-5.39.2/lib/codemirror.js"></script>
<script type="text/javascript" src="codemirror-5.39.2/mode/sql/sql.js"></script>
<script type="text/javascript"
	src="codemirror-5.39.2/addon/hint/show-hint.js"></script>
<script type="text/javascript"
	src="codemirror-5.39.2/addon/hint/sql-hint.js"></script>
<script type="text/javascript"
	src="codemirror-5.39.2/addon/selection/active-line.js"></script>

<div>
    <textarea class="form-control" id="code" name="code"></textarea>
</div>
<script type="text/javascript">
    var source = {"users": ["id","name"],"dbs": ["id","name"]};
	var editor = CodeMirror.fromTextArea(document.getElementById("code"), {//根据DOM元素的id构造出一个编辑器
		lineNumbers : true,
		styleActiveLine : true,
		theme : "eclipse",//设置主题
		mode : 'text/x-mysql',
		hintOptions: {tables: source}
	});
  	editor.setSize('auto','697px');
	editor.on("keyup",function(cm, event) {
		if (!cm.state.completionActive//所有的字母和'$','{','.'在键按下之后都将触发自动完成
				&& ((event.keyCode >= 65 && event.keyCode <= 90)
				|| event.keyCode == 52|| event.keyCode == 219 
				|| event.keyCode == 190)) {
					CodeMirror.commands.autocomplete(cm, null, {
						completeSingle : false
					});
				}
	});
</script>

先从Codemirror的网站下载Codemirror的文件，并放入自己的项目中。下载下来的项目中包含有Demo，而且根据你环境的不同可能会报错，不过一般不要紧。

这里先引入了Codemirror所需的文件，然后在界面中构建了一个textarea，然后使用Codemirror的formTextArea函数，将区域转化成Codemirror的编辑器，同时，设置了行号、高亮活动行、主题、模式、提示数据等属性；同时绑定了自动提示的函数。其他属性我就不详细解释了，网上有很多相关的文章，这里我着重说一下提示相关的东西：

mode : 'text/x-mysql'：这个属性是设定提示的模式，我这里选择了MySQL的模式，可以提供一些MySQL相关的基础字段的提示，如select、delete等。

source变量：里面存储了两级结构：user包含id和name；dbs包含id和name，也就是user表有id和name两列；dbs包含id和name两列。

hintOptions: {tables: source}：这个属性是将source变量绑定至提示功能的tables属性，SQL-hint功能会自动获取tables这个属性的值来进行提示。这里后面会详细讲解，先知道个大概就可以。

editor.on("keyup",function(){}....：这个部分是将提示功能绑定到键盘上的，我去除了部分按键，大家可以根据自己的需求，调整判定条件，所用到的keycode可以搜索到。

至此，已经实现了一个拥有提示功能的SQL编辑器。如果你是想为MySQL或其他数据库提供提示功能，到这里就可以了。如果你想继续了解Codemirror提示功能的实现方式，或者也想为Oracle提供功能，请继续往下看。

Codemirror SQL提示功能源码解析：

通过观察我们引入的js文件，可以很轻易的看出，代码提示功能主要是通过show-hint.js和sql-hint.js两个文件实现的。

show-hint提供了一些基础的提示功能，这里我们不做研究，有兴趣的可以自行探索。

sql-hint提供了SQL相关的提示功能，下面我们来一起研究一下。

CodeMirror.registerHelper("hint", "sql", function(editor, options) {
    tables = parseTables(options && options.tables)
    var defaultTableName = options && options.defaultTable;
    var disableKeywords = options && options.disableKeywords;
    defaultTable = defaultTableName && getTable(defaultTableName);
    keywords = getKeywords(editor);
    identifierQuote = getIdentifierQuote(editor);

    if (defaultTableName && !defaultTable)
      defaultTable = findTableByAlias(defaultTableName, editor);