CodeMirror的认识和使用
1.CodeMirror介绍
CodeMirror是一款功能强大的代码高亮插件，他不仅提供了高亮功能，其丰富的方法属性也封装了缩进、自动换行、获取编辑文本、设置编辑文本、回退功能等多种实用效果。
2.CodeMirror的使用。
a.导入CodeMirror的js和css
<scriptsrc="lib/codemirror.js"></script>
<linkrel="stylesheet"href="../lib/codemirror.css">
<scriptsrc="mode/javascript/javascript.js"></script>
b.将需要渲染的对象传入fromTextArea中，注意：传入的是一个dom对象，且该对象必须赋有value值，因为CodeMirror会自动读取对象的value值并渲染，若没有value值则会报错。
3.CodeMirror的配置说明
a.value：设置编辑器的初始编辑值
b.mode:指定编辑的模式，text/html，javascript等
c.theme：设定主题样式
d.indentUnit:设置缩进值，默认为2个单位
e.smartIndent:是否使用上下文敏感缩进，默认为true
f.设置一个制表符的宽度，默认为4
g.是否用N代替N个制表符的宽度,默认为false
h.electricChars:是否在当前行输入时适当改变其缩进，默认为true
i.lineWrapping:CodeMirror是否可以滚动，默认为false
j.lineNumbers:是否显示编辑器行数，默认为false
k.firstlineNumber:开始计数的行数，默认为1
m.lineNumberFormatter:function(line:Integer),通过行号返回该行的字符串
l.fixedGutter:内容是否水平滚动，默认为true
n.dragDrop:是否可拖拽，默认为false
4.方法说明
(1)getValue():获取编辑器文本
(2)setValue(textString):设置编辑器文本
(3)undo():撤销一个编辑器
(4)redo():重做一个编辑器
(5)setSelection({line:startLineNumber,ch:start_ch},{line:endLineNumber,ch:end_ch});设置一个新的编辑器
(6)getLine(Integer):获取第n行的文本内容
(7)replaceRange(str1,{line,ch},{line,ch},str2):替换str1中一部分代码为str2
(8)lineCount():获取编辑器总行数
(9)replaceSelection(str1,str2):替换所选内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- codeMirror插件start -->
<link rel="stylesheet" href="../js/CodeMirror/lib/codemirror.css">
<script src="../js/CodeMirror/lib/codemirror.js" type="text/javascript"></script>
<script src="../js/CodeMirror/mode/javascript/javascript.js" type="text/javascript"></script>
<!-- codeMirror插件end -->
<script src="../js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
CodeMirror:
<div style="border:1px solid red;width:400px;height:200px;">
<div id="editorArea"></div>
</div>
<script type="text/javascript">
var text = '<input type="text" value="123">'; //初始化将要显示的内容
var edtiorText = $("#editorArea").val(text); //将初始内容添加到显示区
var codeMirror = CodeMirror.fromTextArea($("#editorArea")[0]); //将显示区对象设置到codemirror中实现高亮
</script>
</body>
</html>
4.