setValue之后的Codemirror自动格式

Question

http://liveweave.com/UxEJ0s

我正在为我的应用程序使用Codemirror.

我注意到,如果我选择所有文本并按SHIFT + Tab,它将自动对齐我的代码,使其更容易阅读.

这是我的应用程序当前呈现的示例...

<ul>
<li>
<font color="#f90000">
  Apples
</font>
</li>
<li>
<font color="#ff9a3d">
  Oranges
</font>
</li>
</ul>

这就是我想要渲染它的内容.

<ul>
  <li>
    <font color="#f90000">
      Apples
    </font>
  </li>
  <li>
    <font color="#ff9a3d">
      Oranges
    </font>
  </li>
</ul>

编辑:

有没有人知道在没有在Codemirror中手动选择整个代码的情况下是否有办法做到这一点？

为什么？我有Codemirror在我的我的应用程序,添加的真实动态添加的所有代码的后台运行,但是当我保存最终的代码看起来像上面.

任何帮助是极大的赞赏.

Answer 1

autoFormatRange 已从 codemirror 中删除,因此我们应该使用另一种方式,注册我们自己的扩展:

1.生成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:

<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>

代码在这里找到

Answer 2

自从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 });

Answer 3

您可以使用以下代码来实现您想要的：

function format() {
    var totalLines = editor.lineCount();  
    editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
}

将此函数与您的事件绑定，它将自动格式化代码。