ace editor格式化代码

配合 js-beautify 格式化代码，默认支持 html/css/javascript/java

实例：

<script src="https://www.52dixiaowo.com/tools/npm/ace-builds-1.5.0/src/ace.js"></script>
<script src="https://www.52dixiaowo.com/tools/npm/js-beautify@1.14.3/js/lib/beautify.js"></script>
<link href="https://www.52dixiaowo.com/tools/npm/normalize/normalize@8.0.1.css" rel="stylesheet" />
<div>
    <div class="title">Ace Editor - Java Format</div>
    <textarea name="editor">public class SpringTest {public static void main(String[] args) throws Exception {System.out.print("Hello world");}}</textarea>
    <div id="editor"></div>
</div>
<style>
    .title {
        font-size: 1.67em;
        font-weight: bold;
        text-align: center;
    }

    #editor {
        height: 75vh;
        width: 100%;
    }

    textarea[name="editor"] {
        display: none;
    }

    .as-console-wrapper {
        display: none !important;
    }
</style>
<script>
    var editor = ace.edit('editor');
    var txtAra = document.querySelector('textarea[name="editor"]');
    var jsbOpts = {
        indent_size: 2
    };

    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/java");
    syncEditor();

    // Main Logic
    formatCode(); // 格式化代码

    // Functions
    function syncEditor() {
        editor.getSession().setValue(txtAra.value);
    }

    function commitChanges() {
        txtAra.value = editor.getSession().getValue();
    }

    function formatCode() {
        var session = editor.getSession();
        session.setValue(js_beautify(session.getValue(), jsbOpts));
    }
</script>

方法调用：

• java | javascript： js_beautify
• html ：html_beautify
• css ：css_beautify

如果不存在 jsOpts，则使用默认属性值。

另外，属性默认值与设置项可参考：

{  
    "eol": "\n", //all.行结束符
    "end_with_newline": false,//all,确保在文件结束时换行
    "indent_char": "\t",//all,缩进字符，默认" "，\t 跳格(移至下一列)
    "indent_size": 4,//all,缩进尺寸，默认4
    "indent_with_tabs": true, //all,使用tab缩进,将会覆盖“indent_size”和“indent_char”设置，默认false
    "preserve_newlines": true,//all,保留空行，默认“true”（保留换行符）
    "max_preserve_newlines": null,//html、js,保留连续换行符个数，默认10（比如设为2，则会将2行以上的空行删除为只保留1行）
    "wrap_line_length": 0,//html、js,在 n 个字符之后换行(设置为0忽略换行)
    "html":{
        "extra_liners":["head", "body", "/html"], //配置标签列表，需要在这些标签前面额外加一空白行（换行符）
        "indent_body_inner_html":false,//缩进 < body> 中的元素，默认：true
        "indent_handlebars":true,//格式和缩进，默认为false
        "indent_head_inner_html":false, //缩进 < head> 中的元素，默认：true
        "indent_inner_html":true,// 缩进< head>和< body>中的元素（head和body也会缩进），默认：false
        "indent_scripts":"normal",//缩进< script> 标签里的代码，有三个值：“keep”(对齐< script>标签)、“separate”(对齐左边界)、“normal”(正常缩进)，默认：“normal”
        "inline":[],//各种标签的缩进[ "a", "abbr", "area", "audio", "b", "bdi", "bdo", "br", "button", "canvas", "cite", "code", "data", "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "map", "mark", "math", "meter", "noscript", "object", "output", "progress", "q", "ruby", "s", "samp", "select", "small", "span", "strong", "sub", "sup", "svg", "template", "textarea", "time", "u", "var", "video", "wbr", "text", "acronym", "address", "big", "dt", "ins", "strike", "tt" ]
        "wrap_attributes":"auto",//将属性换到新行，有5个值：“auto”(不换行)、“force”(第2个起换行)、 “force-aligned”(第2个起换行，与第1个属性对齐)、 “force-expand-multiline(所有属性都换行)，默认：“auto”
        "wrap_attributes_indent_size":4,//属性换行缩进大小,默认：indent_size
        "unformatted":[],//数组中的标签不会重新格式化，默认：[]
        "content_unformatted":[],//数组中标签的内容不会重新格式化，默认：[“pre”,“textarea”]
        "void_elements":[],//定义自关闭标签,["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr", "!doctype", "?xml", "?php", "?=", "basefont", "isindex"]
    },
    "js":{
        "brace_style":"collapse",//括号风格，“collapse-preserve-inline”, “collapse”, “expand”, “end-expand”, or “none” ,默认“collapse”
        "break_chained_methods":true,//中断多行间的链式方法调用，默认true
        "comma_first":true,//将逗号放在新行的开头而不是结尾，默认为false
        "e4x":true,//	不受影响地传递E4X xml文本,默认为false
        "indent_level":0,//	初始缩进级别
        "jslint_happy":true,//	开启jslint-stricter的严格模式（强制开启“space_after_anon_function”选项）,默认false
        "keep_array_indentation":true,//	保持数组缩进，默认false
        "keep_function_indentation":true,//	保持函数缩进，默认false
        "operator_position":"before-newline",//	将操作符移动到新行之前或之后，或保持原样。“before-newline”， “after-newline”，或"preserve-newline",默认为"before-newline"
        "space_after_anon_function":true,//	在匿名函数的括号前加空格,默认为false
        "space_after_named_function":,//	在具名函数之前加一个空格
        "space_before_conditional":true,//	在条件语句之前保留一个空格，默认true
        "space_in_empty_paren":true,//	在括号中留空格，默认为false
        "space_in_paren":true,//	在函数参数之间增加空格，默认为false
        "unescape_strings":true,//	解码用xNN表示法编码的可打印字符,默认为false
        "unindent_chained_methods":true,//	Unindent链接方法,默认为false
    }
    "css":{
        "newline_between_rules":false,//在css规则之间添加一个换行符，默认为false
        "selector_separator_newline":true,//在多个选择器之间加一个换行符
        "space_around_combinator":false,//确保选择器分隔符周围的空间 (>+~)
    }
}