使用CodeMirror实现在线velocity语法高亮和自动联想功能

使用背景：

    最近需要开发一款线上velocity编辑器，用于配置模板的管理。为了能够使用户觉得好用，编辑器需要提供velocity语法高亮，并且能够提供自动联想功能。需求是比较清晰的，但是完全自己写编译器，难度太高，是不可能的。而且，软件业不鼓励重复造轮子。所以，首先搜索现成的插件，主要以javascript为主。这方面的资料并不算多，有的介绍也是比较简单，最近Google被封死，部分翻墙软件也抵不过新墙的坚硬，外文资料基本为空。查找到主要是对文本显示提供高亮，并不对文本提供编辑功能。有个codepress，新版本似乎只兼容IE，而且textarea获取焦点的时候，所有文本的换行符都消失，很不便于真正的操作。只能再找，花了近半天时间，一开始试验了几款，都不算接近需求。终于，众里寻他，在下文     的文末介绍到了CodeMirror，博文中以“灰常推荐”说明，进入官网一看，哈哈，太满意了。所以，就有了接下去一天半的整合开发。用的很愉快，特此记录下来。

  

CodeMirror简介：

       CodeMirror是一个利用JavaScript实现代码编辑器。它为使用者提供了几乎覆盖全部流行编程语言的代码高亮和自动缩进功能，在浏览器之上构建了一个简易的IDE。

在textarea中我们希望能够实现代码高亮，以便可以在线上做编辑，并提交到后台。很多editor web编辑器都有类似的功能，比如highlight.js/rainbow/SyntaxHighlighter等，但需要我们手动去修改插件的代码，对于前端不太熟悉，希望拿来即用的开发者，显然不是很好的方案。众里寻他，codemirror正是完美的选择，它是个javascript插件，可以帮助我们实现代码高亮显示，并且在编辑时就可以看到高亮效果。具体的实现原理可以参见http://www.cnblogs.com/zgqys1980/archive/2011/10/25/2223492.html和开发文档。其中，CodeMirror可以编辑的语言高达90多种，包括主流的C/C++/Java/Javascript/Fortran等，还包括比较特殊的velocity/Z80/Jinja2等，而且还支持自定义扩展。更牛犇的是，还具备自动联想提示功能——可见，称其为线上简易IDE是当之无愧的。

 

好的，介绍完背景，回归到我们的正题，如何实现在线velocity语法高亮和自动联想功能。非常高兴的是，CodeMirror已经提供了velocity语法高亮功能，但是并没有提供velocity的自动联想提示功能，需要我们自己做开发。

自定义autoCompletion

官方说明http://codemirror.net/doc/manual.html#addon_show-hint

主要有如下一段：

Provides a frameworkfor showing autocompletion hints. Defines editor.showHint, whichtakes an optional options object, and pops up a widget that allows the user toselect a completion. Finding hints is done with a hinting functions(the hint option), which is a function that take an editorinstance and options object, and return a{list, from, to} object,where list is an array of strings or objects(thecompletions), and from and to give the start and end of thetoken that is being completed as {line, ch} objects.

通过上面一段说明，可以知道showHint的数据来源是一个hint函数，该函数返回值是一个{list, from, to}对象——这样我们查看addon/hind文件下的实例就有把握了。比如我改造的javascript-hint.