摘要：
目前，CodeMirror在线代码编辑器被广泛使用。它支持100多种语言，并且高度可定制。CodeMirror突出了各种编程语言的关键词、函数、变量和其他代码，具有丰富的API和可扩展函数以及多种主题样式。如果您想在页面中嵌入代码编辑区域，CodeMirror是最佳选择。
目前CodeMirror在线代码编辑器在运用还蛮广泛的，支持100多种语言，高度可定制。支持语言有C、C++、C#、Java、Perl、HTML、CSS、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等。以及diff、LaTeX、SQL、wiki、Markdown等文件格式。CodeMirror为各种编程语言实现关键字、函数、变量等代码高亮显示，丰富的API和可扩展功能以及多个主题样式。如果要在页面中需要嵌入一个代码编辑区，CodeMirror是最佳的选择。
关于下载可以直接到官网上去下载
CodeMirror的官网是：http://codemirror.net/
代码托管在Github上，下载地址：https://github.com/codemirror/CodeMirror/archive/master.zip
下面是需要引入的css
<link href="http://t.zoukankan.com/codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">//必须引入，是CodeMirror的核心样式文件 <link href="http://t.zoukankan.com/codemirror/theme/monokai.css" rel="stylesheet" type="text/css">//是编辑器模板，可以根据需要修改 <link href="http://t.zoukankan.com/codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">//全屏支持样式文件
<script type="text/javascript" src="codemirror/lib/codemirror.js"></script>//需要引入的核心js页面展示：
<textarea name="code"></textarea>
关于配置：
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, // 显示行数
indentUnit: 4, // 缩进单位为4
styleActiveLine: true, // 当前行背景高亮
matchBrackets: true, // 括号匹配
mode: 'htmlmixed', // HMTL混合模式
lineWrapping: true, // 自动换行
theme: 'monokai', // 使用monokai模版
});
</script> 当然，配置项有很多，以上只是一部分，具体的配置项内容可以参考官网，有很多，可以酌情使用。
接下来就是项目中运用到比较多的情况说明：
- 设置代码框的大小
editor.setSize('800px', '950px'); - 获取编辑器的内容
editor.getValue(); //仅仅单纯获取编辑器的文本内容，不能识别换行及一些特殊符号的转义
- 给编辑器赋值
editor.setValue("");
以上的几种做法都没办法满足我当时在项目中遇到的问题就是：要取出代码编辑器的内容传给服务端，而且服务端还要将我传的内容再返给我供页面初始化值用，但是因为getValue取出的内容是不能转义甚至不能识别换行，导致报错，所以我要将编辑器取到的内容显示再textarea里面。于是即是：
<textarea >${item.funAttri!}</textarea>
//因为我用的beetl模板，所以可以直接读取后台穿的值${item.funAttri!} 先将编辑器设置内容，而这个内容就是服务端传过来的
editor.setValue($("#funAttri").html());这个时候直接取出编辑器的内容即可：
editor.save();//同步CodeMirror的数据到textarea（这一步至关重要）
var funattri = $("#funAttri").val();//直接取出即可，之后可以作为内容再次提交给服务端好了，以上便是我所遇到的问题，其实最关键的一步就是将value值同步到textarea里面，这样取出的就是html了