setValue之后的Codemirror自动格式
http://liveweave.com/UxEJ0s
我正在为我的应用程序使用Codemirror。
我注意到如果我选择所有文本并按SHIFT + Tab它会自动对齐我的代码，使其更容易阅读。
这是我的应用程序当前呈现的示例…
- Apples
- Oranges
这就是我想要渲染它的内容。
- Apples
- Oranges
编辑 ：
有没有人知道在没有在Codemirror中手动选择整个代码的情况下是否有办法做到这一点？
为什么？ 我在我的应用程序后台运行Codemirror所有添加的代码都是动态添加的，但是当我保存最终代码时，它看起来就像上面一样。
任何帮助是极大的赞赏。
autoFormatRange 已从 autoFormatRange 中删除 ，因此我们应该使用另一种方式，注册我们自己的扩展：
生成js
转到js生成器（只是通过插件和自定义扩展来获得缩小的js的简单方法）。 http://codemirror.net/doc/compress.html
更新了版本3的链接： http ： //codemirror.net/3/doc/compress.html
2.选择所需的选项
粘贴自定义扩展代码，然后按“ 压缩 ”按钮。
CodeMirror.defineExtension("autoFormatRange", function (from, to) { var cm = this; var outer = cm.getMode(), text = cm.getRange(from, to).split("\n"); var state = CodeMirror.copyState(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 (!stream.eol()) { var inner = CodeMirror.innerMode(outer, state); var style = outer.token(stream, state), cur = stream.current(); stream.start = stream.pos; if (!atSol || /\S/.test(cur)) { out += cur; atSol = false; } if (!atSol && inner.mode.newlineAfterToken && inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i+1] || "", inner.state)) newline(); } if (!stream.pos && outer.blankLine) outer.blankLine(state); if (!atSol) newline(); } cm.operation(function () { cm.replaceRange(out, from, to); for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur) cm.indentLine(cur, "smart"); }); }); // 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"); } }); });
3.使用生成的.js如下
HTML：
代码在这里找到
自从Codemirror删除了对autoFormatRange()支持以来，使用它来格式化文本并不值得。 我使用js-beautify代替。
var beautify_js = require('js-beautify').js_beautify var beautify_html = require('js-beautify').html var formattedJSON = beautify_js(jsonText, { indent_size: 2 }); var formattedXML = beautify_html(xmlText, { indent_size: 2 });
您可以使用以下代码来实现您的目标：
function format() { var totalLines = editor.lineCount(); editor.autoFormatRange({line:0, ch:0}, {line:totalLines}); }
将此function与您的事件绑定，它将自动格式化代码。
通过使用codemirror格式化附加组件，您可以实现您的要求
JSFiddle演示
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, mode: "htmlmixed", extraKeys:{"Shift-Tab":autoFormatSelection} }); function getSelectedRange() { return { from: editor.getCursor(true), to: editor.getCursor(false) }; } function autoFormatSelection() { var range = getSelectedRange(); editor.autoFormatRange(range.from, range.to); }
来源链接
这是原始的插件，包括一个小的更新，让它与CodeMirror V3一起使用：
CodeMirror.extendMode("css", { commentStart: "/*", commentEnd: "*/", newlineAfterToken: function(type, content) { return /^[;{}]$/.test(content); } }); CodeMirror.extendMode("javascript", { commentStart: "/*", commentEnd: "*/", newlineAfterToken: function(type, content, textAfter, state) { if (this.jsonMode) { return /^[\[,{]$/.test(content) || /^}/.test(textAfter); } else { if (content == ";" && state.lexical && state.lexical.type == ")") return false; return /^[;{}]$/.test(content) && !/^;/.test(textAfter); } } }); CodeMirror.extendMode("xml", { commentStart: "", newlineAfterToken: function(type, content, textAfter) { return ( type == "tag" && />$/.test(content) || /^$/.test(content) ); } }); CodeMirror.defineExtension("commentRange", function (isComment, from, to) { var cm = this, curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode; cm.operation(function() { if (isComment) { // Comment range cm.replaceRange(curMode.commentEnd, to); cm.replaceRange(curMode.commentStart, from); if (from.line == to.line && from.ch == to.ch) // An empty comment inserted - put cursor inside cm.setCursor(from.line, from.ch + curMode.commentStart.length); } else { // Uncomment range var selText = cm.getRange(from, to); var startIndex = selText.indexOf(curMode.commentStart); var endIndex = selText.lastIndexOf(curMode.commentEnd); 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 + curMode.commentStart.length, endIndex) // From comment end till string end + selText.substr(endIndex + curMode.commentEnd.length); } cm.replaceRange(selText, from, to); } }); }); 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"); } }); }); CodeMirror.defineExtension("autoFormatRange", function (from, to) { var cm = this; var outer = cm.getMode(), text = cm.getRange(from, to).split("\n"); var state = CodeMirror.copyState(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 (!stream.eol()) { var inner = CodeMirror.innerMode(outer, state); var style = outer.token(stream, state), cur = stream.current(); stream.start = stream.pos; if (!atSol || /\S/.test(cur)) { out += cur; atSol = false; } if (!atSol && inner.mode.newlineAfterToken && inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i+1] || "", inner.state)) newline(); } if (!stream.pos && outer.blankLine) outer.blankLine(state); if (!atSol)newline(); } cm.operation(function () { cm.replaceRange(out, from, to); for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur) cm.indentLine(cur, "smart"); cm.setSelection(from, cm.getCursor(false)); }); });