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>
其他的代码讲解省略，参考代码注释可看懂。
浙公网安备 33010602011771号