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

Question

问题：

当我在文本字符串中获取一串HTML并插入/或设置ACE.js编辑器值，并使用美化来整理/缩进代码时，但是它不起作用，我想知道是否ext-beautify.js哪个由ACE.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);

运行小提琴链接。