CodeMirror是一个运行在浏览器中的代码编辑器，支持100多种语言，高度可定制。
支持语言有C、C++、C#、Java、Perl、HTML、CSS、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等。
以及diff、LaTeX、SQL、wiki、Markdown等文件格式。
CodeMirror为各种编程语言实现关键字、函数、变量等代码高亮显示，丰富的API和可扩展功能以及多个主题样式。
如果要在页面中需要嵌入一个代码编辑区，CodeMirror是最佳的选择。
1 下载
CodeMirror的官网是：http://codemirror.net/
代码托管在Github上，下载地址：https://github.com/codemirror/CodeMirror/archive/master.zip
2 安装
下载源码后，解压到站点目录，然后分别引入JS和CSS文件。
2.1 引入CSS文件
<link href="codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">
<link href="codemirror/theme/monokai.css" rel="stylesheet" type="text/css">
<link href="codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">以上文件中，
- codemirror.css：必须引入，是CodeMirror的核心样式文件。
- monokai.css：是编辑器模板，可以根据需要修改。
- fullscreen.css：全屏支持样式文件。
2.2 引入JS文件
这里我们以HTML混合语言支持为例，HTML混合语言包括HTML标签、CSS和JavaScript。
需要引入下面的文件。
<!-- 引入CodeMirror核心文件 -->
<script type="text/javascript" src="codemirror/lib/codemirror.js"></script>
<!-- CodeMirror支持不同语言，根据需要引入JS文件 -->
<!-- 因为HTML混合语言依赖Javascript、XML、CSS语言支持，所以都要引入 -->
<script type="text/javascript" src="codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="codemirror/mode/css/css.js"></script>
<script type="text/javascript" src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
<!-- 下面分别为显示行数、括号匹配和全屏插件 -->
<script type="text/javascript" src="codemirror/addon/selection/active-line.js"></script>
<script type="text/javascript" src="codemirror/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="codemirror/addon/display/fullscreen.js"></script>2.3 配置
通过JavaScript配置CodeMirror的基本信息，如下：
<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模版
});
editor.setOption("extraKeys", {
// Tab键换成4个空格
Tab: function(cm) {
var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
cm.replaceSelection(spaces);
},
// F11键切换全屏
"F11": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
// Esc键退出全屏
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
});
</script>这里，我们为id为code的文本框添加CodeMirror编辑器样式。
注意，这段代码必须在<textarea>标签的后面，或者用window.onload加载。
如果要设置编辑器的高度、宽度和字体，请在CSS里面设置.CodeMirror。
3 使用
接着，我们在HTML中添加一个form表单：
<form action="post.php" method="post">
<textarea id="code" name="code">HTML CONTENT</textarea>
</form>注意，如果textarea里面是PHP输出的内容，请保证前后无空格，否则提交时会有多余空格插入内容，应该为如下格式：
<textarea id="code" name="code"><?= $code ?></textarea>然后，在表单提交之前，我们同步CodeMirror的数据到textarea就可以啦：
$("form").on('submit', function(e){
editor.save();
// 或者获取数据
// var data = editor.getValue();
}这样，就可以用上了一个强大的在线代码编辑器了。
转载来自：https://www.awaimai.com/2050.html