代码编辑器CodeMirror（插件类）

项目需要在网页上实现一个代码编辑器，支持语法高亮、自动缩进、智能提示等功能。发现CodeMirror刚好满足所有需求。

插件 CodeMirror 效果

插件 CodeMirror 效果

基础常用：

<!--下面两个是使用Code Mirror必须引入的-->
<link rel="stylesheet" href="codemirror-5.12/lib/codemirror.css">
<script src="codemirror-5.12/lib/codemirror.js"></script>

<!--Java代码高亮必须引入-->
<script src="codemirror-5.12/clike.js"></script>

<textarea id="code"></textarea>
<script type="text/javascript">
//根据DOM元素的id构造出一个编辑器
var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
          mode:"text/x-java" //实现Java代码高亮
          indentWithTabs: true,
          smartIndent: true,  //自动缩进
           lineNumbers:true，  // 显示行号
           matchBrackets : true,  //括号匹配
           readOnly : true,  //只读
           lineWiseCopyCut: true,
});
</script>

配置说明：

1、以什么格式进行高亮
mode: "text/x-sql",

2、主题
theme: 'seti',

3、是否代码折叠
lineWrapping: true,

4、是否在编辑器左侧显示行号
lineNumbers: true,

5、行号从哪个数开始计数，默认为1
firstLineNumber: 1,

6、tab字符的宽度，默认为4
indentWithTabs: true,
indentWithTabs: true 在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符

7、自动缩进，设置是否根据上下文自动缩进,默认为true
smartIndent: true,
设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。

8、括号匹配
matchBrackets : true,

9、是否在初始化时自动获取焦点
autofocus: true,

10、智能提示
extraKeys: {"Ctrl-Space": "autocomplete"},

11、编辑器是否只读,并且不能获得焦点
readOnly:'nocursor',

12、在选择时是否显示光标，默认为false
showCursorWhenSelecting:true

13、lineWiseCopyCut: true,
启用时，如果在复制或剪切时没有选择文本，那么就会自动操作光标所在的整行。

14、lineWrapping:true,   换行（常用）

15、文本设置
getValue():获取编辑器文本
setValue(textString):设置编辑器文本

代码方式显示：
http://codemirror.net/mode/

遇到问题：

如果出现了多个codeMirror相互影响的问题,需要在最后对codeMirror进行异步刷新处理即可,也就是代码段:

var tmp = function() {
    editor.refresh();  }
    setTimeout(tmp, 50);

资料地址：
https://github.com/codemirror/codemirror
http://codemirror.net/demo/resize.html
相应配置 ：https://zhuanlan.zhihu.com/p/22163474