codeMirror实现Json编辑器功能
Posted Angies
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了codeMirror实现Json编辑器功能相关的知识，希望对你有一定的参考价值。
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编辑器功能的主要内容，如果未能解决你的问题，请参考以下文章