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>
其他的代碼講解省略，參考代碼注釋可看懂。