codeMirror实现Json编辑器的代码格式化⼀、⾸先安装codeMirror的依赖js和css，顺便引⼊jQuery包。
<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>
⼆、由于json属于JavaScript的⼀种，所以也得引⼊JavaScript。
<script src="codemirror-5.31.0/mode/javascript/javascript.js"></script>
三、安装⼀些需要的样式，⽐如我引⼊的如下样式，其实可以⾃⼰选择引⼊，也可以不引⼊。
<!--引⼊js，绑定Vim-->
<script src="codemirror-5.31.0/keymap/vim.js"></script>
<!--引⼊css⽂件，⽤以⽀持主题-->
<link rel="stylesheet" href="codemirror-5.31.0/theme/eclipse.css">
四、body代码，编辑器就是textarea，可⾃定义样式，在head中引⼊即可。
<body>
<textarea id="code"></textarea>
</body>
五、最重要的就在头部引⽤以下代码，表⽰json格式化。
<!--格式化-->
<script src="codemirror-5.31.0/lib/formatting.js"></script>
　我是将⾃定义的格式化代码存到了codeMirror的lib下新建了⼀个formatting.js，以下是我新建的js的源码。(function() {
commentStart: "/*",
commentEnd: "*/",
newlineAfterToken: function(type, content) {
return /^[;{}]$/.test(content);
}
});
commentStart: "/*",
commentEnd: "*/",
// FIXME semicolons inside of for
newlineAfterToken: function(type, content, textAfter, state) {
if (this.jsonMode) {
return /^[\[,{]$/.test(content) || /^}/.test(textAfter);
} else {
if (content == ";" && state.lexical && pe == ")") return false;
return /^[;{}]$/.test(content) && !/^;/.test(textAfter);
}
}
});
commentStart: "<!--",
commentEnd: "-->",
newlineAfterToken: function(type, content, textAfter) {
return type == "tag" && />$/.test(content) || /^</.test(textAfter);
}
});
// Comment/uncomment the specified range
CodeMirror.defineExtension("commentRange", function (isComment, from, to) {
var cm = this, curMode = CodeMirror.Mode(), cm.getTokenAt(from).state).mode;
cm.operation(function() {
if (isComment) { // Comment range
if (from.line == to.line && from.ch == to.ch) // An empty comment inserted - put cursor inside
cm.setCursor(from.line, from.ch + curModementStart.length);
} else { // Uncomment range
var selText = cm.getRange(from, to);
var startIndex = selText.indexOf(curModementStart);
var endIndex = selText.lastIndexOf(curModementEnd);
if (startIndex > -1 && endIndex > -1 && endIndex > startIndex) {
// Take string till comment start
selText = selText.substr(0, startIndex)
// From comment start till comment end
+ selText.substring(startIndex + curModementStart.length, endIndex)
// From comment end till string end
phpjson格式化输出
+ selText.substr(endIndex + curModementEnd.length);
}
}
});
});
// Applies automatic mode-aware indentation to the specified range
CodeMirror.defineExtension("autoIndentRange", function (from, to) {
var cmInstance = this;
this.operation(function () {
for (var i = from.line; i <= to.line; i++) {
cmInstance.indentLine(i, "smart");
}
});
});
// Applies automatic formatting to the specified range
CodeMirror.defineExtension("autoFormatRange", function (from, to) {
var cm = this;
var outer = cm.getMode(), text = cm.getRange(from, to).split("\n");
var state = pyState(outer, cm.getTokenAt(from).state);
var tabSize = cm.getOption("tabSize");
var out = "", lines = 0, atSol = from.ch == 0;
function newline() {
out += "\n";
atSol = true;
++lines;
}
for (var i = 0; i < text.length; ++i) {
var stream = new CodeMirror.StringStream(text[i], tabSize);
while (!l()) {
var inner = CodeMirror.innerMode(outer, state);
var style = ken(stream, state), cur = stream.current();
stream.start = stream.pos;
if (!atSol || /\S/.test(cur)) {
out += cur;
atSol = false;
}
if (!atSol && wlineAfterToken &&
}
if (!stream.pos && outer.blankLine) outer.blankLine(state);
if (!atSol) newline();
}
cm.operation(function () {
for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur)
cm.indentLine(cur, "smart");
cm.setSelection(from, cm.getCursor(false));
});
});
})();
六、使⽤⽅法
使⽤⽅式是在html页⾯中的JavaScript中写⼊以下代码：
<script type="text/javascript">
var editor=CodeMirror.ElementById("code"),{
//Js⾼亮显⽰
mode:"application/json",
//设置主题
theme:"eclipse",
//快捷键
extraKeys:{
"F7": function autoFormat(editor) {
var totalLines = editor.lineCount();
editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
}//代码格式化
},
});
</script>
  运⾏项⽬，写⼊json格式代码，点击F7就可实现对代码的格式化

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。