setValue之后的Codemirror自动格式化 [英] Codemirror Auto Format after setValue
问题描述
我正在为我的应用程序使用Codemirror.
I'm using Codemirror for my app.
我注意到,如果我选择所有文本并按SHIFT + Tab,它将自动对齐我的代码,使其更易于阅读.
I noticed if I select all the text and press SHIFT+Tab it will auto align my code making it easier to read.
这是我的应用当前呈现的示例...
Here's an example of what my app currently renders...
<ul>
<li>
<font color="#f90000">
Apples
</font>
</li>
<li>
<font color="#ff9a3d">
Oranges
</font>
</li>
</ul>
这就是我要使其呈现的内容.
Here's what I'm trying to get it to render.
<ul>
<li>
<font color="#f90000">
Apples
</font>
</li>
<li>
<font color="#ff9a3d">
Oranges
</font>
</li>
</ul>
编辑:
有人知道是否有一种方法可以在Codemirror中手动选择整个代码吗?
Does anyone know if there's a way to do this without selecting the whole code manually in Codemirror?
为什么?我在我的应用程序后台运行Codemirror,所有添加的代码都是动态添加的,但是当我保存最终代码时,它就像上面的样子.
Why? I have Codemirror running in my background of my app all code that's added is added dynamically, but when I save the final code it looks like above.
非常感谢您的帮助.
推荐答案
autoFormatRange
已从Codemirror中删除,因此我们应该使用另一种方式注册我们自己的扩展名:
autoFormatRange
was removed from codemirror, so we should use another way, register our own extension:
1.生成js
转到js生成器(这是一种通过插件和自定义扩展来获得缩小的js的简便方法). http://codemirror.net/doc/compress.html
Go to js generator (just an easy way to get minified js with plugins and custom extensions). http://codemirror.net/doc/compress.html
版本3的更新链接: http://codemirror.net/3/doc/compress. html
2.选择所需的选项
粘贴自定义扩展名代码,然后按"压缩"按钮.
Paste custom extension code and press "Compress" button.
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:
<textarea id=code><?=$value?></textarea>
<link rel="stylesheet" href="/codemirror/codemirror.css">
<script src="/codemirror/codemirror-compressed.js"></script>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
lineNumbers: true,
mode: "text/html"
});
var totalLines = editor.lineCount();
editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
</script>
在此处
这篇关于setValue之后的Codemirror自动格式化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!