javascript - ACE.js代码编辑器如何使用美化HTML,CSS,JS

Question

问题:

当我在文本字符串中获取一串 HTML 并插入/或设置 ACE.js 编辑器值，并使用美化来整理/缩进代码时，但是它不起作用，我想知道是否 ACE.js提供的ext-beautify.js是否支持html,css,js美化？我在这里做错了什么？

var htmlString = "<div class="row"><div class="col-sm-12"><span>chrome</span></div></div>";

var editor = ace.edit("editor");
editor.session.setMode("ace/mode/html");
editor.session.setValue(htmlString);

var beautify = ace.require("ace/ext/beautify");
beautify.beautify(editor.session);

ACE.js 编辑器的输出

<div class="row"><div class="col-sm-12"><span>chrome</span></div></div>

但我需要它

<div class="row">
    <div class="col-sm-12">
        <span>chrome</span>
    </div>
</div>

有什么建议或解决方案吗？

Answer 1

我也尝试过美化 ace 编辑器的扩展，但它对我也不起作用，输出仅在单行中。我经历了JS Beautifier它工作得很好。它有美化 JS、HTML 和 CSS 的选项。您可以使用 HTML 模块来美化您在 Ace Editor 中的代码。我附上了下面的示例代码:

HTML:

<div id="editor"></div>

JS:

var htmlString = '<div class="row"><div class="col-sm-12"><span>chrome</span></div></div><div class="row"><div class="col-sm-12"><span>mozilla</span></div></div>';
htmlString = html_beautify(htmlString);

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
editor.session.setValue(htmlString);

正在运行 Fiddle链接。