Code是一款代码编辑器，他可以支持多种编辑器功能，官网为http://codemirror.net/，本文主要讲解Json代码的编辑功能。下面是一些功能的代码及详细说明：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" href="codemirror-5.31.0/lib/codemirror.css"> ???<script src="jquery.1.11.min.js"></script> ???<script src="codemirror-5.31.0/lib/codemirror.js"></script> ???<!--代码高亮必须引入--> ???<script src="codemirror-5.31.0/mode/javascript/javascript.js"></script> ???<!--引入css文件，用以支持主题--> ???<link rel="stylesheet" href="codemirror-5.31.0/theme/eclipse.css"> ???<!--引入js，绑定Vim--> ???<link rel="stylesheet" href="codemirror-5.31.0/addon/dialog/dialog.css"> ???<script src="codemirror-5.31.0/keymap/vim.js"></script> ???<script src="codemirror-5.31.0/addon/search/searchcursor.js"></script> ???<!--改善vim输入命令时的样式--> ???<script src="codemirror-5.31.0/addon/dialog/dialog.js"></script> ???<!--支持代码折叠--> ???<link rel="stylesheet" href="codemirror-5.31.0/addon/fold/foldgutter.css"/> ???<script src="codemirror-5.31.0/addon/fold/foldcode.js"></script> ???<script src="codemirror-5.31.0/addon/fold/foldgutter.js"></script> ???<script src="codemirror-5.31.0/addon/fold/brace-fold.js"></script> ???<script src="codemirror-5.31.0/addon/fold/comment-fold.js"></script> ???<!--全屏模式--> ???<link rel="stylesheet" href="codemirror-5.31.0/addon/display/fullscreen.css"> ???<script src="codemirror-5.31.0/addon/display/fullscreen.js"></script> ???<!--括号匹配--> ???<script src="codemirror-5.31.0/addon/edit/matchbrackets.js"></script> ???<!--自动补全--> ???<link rel="stylesheet" href="codemirror-5.31.0/addon/hint/show-hint.css"> ???<script src="codemirror-5.31.0/addon/hint/show-hint.js"></script> ???<script src="codemirror-5.31.0/addon/hint/anyword-hint.js"></script> ???<!--行注释--> ???<script src="codemirror-5.31.0/addon/comment/comment.js"></script> ???<!--格式化--> ???<script src="codemirror-5.31.0/addon/format/format.js"></script> ???<!--代码检查错误--> ???<link rel="stylesheet" href="codemirror-5.31.0/addon/lint/lint.css"> ???<script src="jsonlint.js"></script> ???<script src="codemirror-5.31.0/addon/lint/lint.js"></script> ???<script src="codemirror-5.31.0/addon/lint/json-lint.js"></script> ???<style type="text/css"> ???????.CodeMirror { ???????????font-size:14px; ???????????color: #333; ???????????font-family: Microsoft YaHei Arial sans-serif; ???????????background-color: #FFF; ???????????border:1px solid #ece2e2; ???????} ???????button { ???????????position: absolute; ???????????top: 510px; ???????????left: 100px; ???????} ???????.CodeMirror-linenumber { ???????????background-color: #F7F7F7; ???????????color: #999; ???????????border:1px solid #ddd; ???????} ???</style></head><body><textarea id="code"></textarea><button class="save" id="save" title="快捷键:Ctrl+S">保存</button></body><script type="text/javascript"> ???var editor=CodeMirror.fromTextArea(document.getElementById("code"),{ ???????value: $(‘#code‘).val(), ???????//Js高亮显示 ???????mode:"application/json", ???????indentUnit : 2, ?// 缩进单位，默认2 ???????smartIndent : true, ?// 是否智能缩进 ???????//显示行号 ???????styleActiveLine: true, ???????lineNumbers:true, ???????lineWrapping:true, ???????//设置主题 ???????theme:"eclipse", ???????//绑定Vim ???????keyMap:"vim", ???????//代码折叠 ???????lineWrapping:true, ???????foldGutter: true, ???????gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter","CodeMirror-lint-markers"], ???????//CodeMirror-lint-markers是实现语法报错功能 ???????lint: true, ???????//全屏模式 ???????fullScreen:true, ???????//括号匹配 ???????matchBrackets:true, ???????//快捷键 ???????extraKeys:{ ???????????"Alt-Space": "autocomplete",//ctrl-space唤起智能提示 ???????????"F11": function(cm) { ???????????????cm.setOption("fullScreen", !cm.getOption("fullScreen")); ???????????}, ??????????"Esc": function(cm) { ??????????????if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); ???????????}, ???????????"Ctrl-/": "toggleComment", ???????????"Ctrl-S": function () { ???????????????$(‘#save‘).click(); ???????????}, ???????????"Ctrl-Z":function (editor) { ???????????????editor.undo(); ???????????},//undo ???????????"F8":function (editor) { ???????????????editor.redo(); ???????????},//Redo ???????????"F7": function autoFormat(cm) { ???????????????var totalLines = cm.lineCount(); ???????????????cm.autoFormatRange({line:0, ch:0}, {line:totalLines}); ???????????}//代码格式化 ???????} ???}); ???editor.setSize(‘100%‘,‘500px‘); ???CodeMirror.commands.autocomplete = function(cm) { ???????cm.showHint({hint: CodeMirror.hint.anyword}); ???}; ???$(‘#save‘).click(function () { ???????var ob = editor.getValue(); ?// 得到所有内容 ???????alert(ob); ???});</script></html>一、引入基本框架
<link rel="stylesheet" href="codemirror-5.31.0/lib/codemirror.css"> <script src="codemirror-5.31.0/lib/codemirror.js"></script>
本代码是为了引入项目CodeMirror的基本样式和基本方法
二、引入语法高亮
<script src="codemirror-5.31.0/mode/javascript/javascript.js"></script>
这里的调用会在body中添加编辑器，这里因为直接在上面引用了javascript.js，所以这个编辑器会对javascript的关键字高亮显示，由于Json是一种JavaScript，所以要想使用Json语法就必须引入javascript.js。
<!--引入css文件，用以支持主题-->
<link rel="stylesheet" href="codemirror-5.31.0/theme/eclipse.css">
codeMirror的所有文件夹中有一个theme文件夹，里面存放所有已有的主题，我此处用了eclipse.css主题，还可以自定义主题。
接下来在js中写入以下代码后就可以有基本的Json编辑器了：
var editor=CodeMirror.fromTextArea(document.getElementById("code"),{ ???????//Js高亮显示 ???????mode:"application/json", ???????//显示行号 ???????styleActiveLine: true, ???????lineNumbers:true，
//设置主题
???????theme:"eclipse"});
其中code为需要成为编辑器的容器的ID，mode属性就是选择要高亮的语法，此处为Json，lineNumbers:true是显示行号。
三、修改已有编辑器样式
此处修改了编辑器的样式和行号样式。
在style中写入class名为CodeMirror 的样式即为修改编辑器样式。写入class名为CodeMirror-linenumber即可修改行号样式，示例代码为：
???<style type="text/css"> ???????.CodeMirror { ???????????font-size:14px; ???????????color: #333; ???????????font-family: Microsoft YaHei Arial sans-serif; ???????????background-color: #FFF; ???????????border:1px solid #ece2e2; ???????} ???????button { ???????????position: absolute; ???????????top: 510px; ???????????left: 100px; ???????} ???????.CodeMirror-linenumber { ???????????background-color: #F7F7F7; ???????????color: #999; ???????????border:1px solid #ddd; ???????} ???</style>其他的代码讲解省略，参考代码注释可看懂。
codeMirror实现Json编辑器功能
原文地址：http://www.cnblogs.com/Angies/p/7830948.html