如何在 Ace Editor 中使用美化功能?

Posted

技术标签:

【中文标题】如何在 Ace Editor 中使用美化功能?【英文标题】:How do I use beautify in Ace Editor? 【发布时间】:2015-10-24 08:46:08 【问题描述】:

我在 Ace 编辑器中找到了美化扩展,但我没有看到任何如何使用它的示例。到目前为止,这是我所拥有的:

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

但我得到了错误:

Result of expression 'e' [undefined] is not an object.

【问题讨论】:

【参考方案1】:

看起来像这样:

var beautify = ace.require("ace/ext/beautify"); // get reference to extension
var editor = ace.edit("editor"); // get reference to editor
    beautify.beautify(editor.session);

它要求您将 Ace Editor 会话作为第一个参数传入。在我最初的问题中,我没有传入任何变量,这会引发错误。

注意:在扩展发行说明中提到的效果不佳。使用起来不够好。

【讨论】:

你能解释一下你的答案吗? 别忘了包含 ext-beautify.js 将此行添加到您的 html 中:<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-beautify.js" type="text/javascript" charset="utf-8"></script> 这个版本和 ace 自带的版本不同吗? 我是这个扩展的作者。我最近提交了一个重大的重写,它的效果要好得多,尤其是对于 js beautify 不太擅长的混合模式文档。【参考方案2】:

我没有得到它的工作

var beautify = ace.require("ace/ext/beautify"); // get reference to extension

美化始终是undefined

过了一会儿我放弃了。

并使用了外部美化库(Link)

function beatify() 
  var val = editor.session.getValue();
  //Remove leading spaces
  var array = val.split(/\n/);
  array[0] = array[0].trim();
  val = array.join("\n");
  //Actual beautify (prettify)
  val = js_beautify(val);
  //Change current text to formatted text
  editor.session.setValue(val);

【讨论】:

以上链接已移至 - github.com/beautify-web/js-beautify 或 beautifier.io 可能你得到undefined,因为你还没有导入ext-beautify.js文件【参考方案3】:

遇到了同样的问题。最终构建了一个简化的美化方法,以满足我的需求(不是让所有东西都在同一条线上)。

请注意,我使用的是 Ace Editor 的 react version,但同样适用于 JS。它不支持 cmets,因为我生成的代码不包含它们,如果您希望支持它们,可能需要扩展该方法。

const html = prettifyHtml('<div id="root"><div class="container"><div class="row"><div class="col-lg-6"><a href="#">hello there</a><p>What <strong>is</strong> this? <br /> yes</p></div><div class="col-lg-6"></div></div></div></div>');
const scss = prettifyScss('.container  strong color:green; background-color:white; border:1px solid green; &:hover cursor:pointer   ');

<AceEditor
     mode="html" // or "scss"
     theme="github"
     defaultValue=html // or scss
     onChange=this.onChange.bind(this)
 />

html:

export const prettifyHtml = (html) => 
    let indent = 0,
        mode = 'IDLE',
        inTag = false,
        tag = '',
        tagToCome = '',
        shouldBreakBefore = false,
        shouldBreakAfter = false,
        breakBefore = ['p', 'ul', 'li'],
        breakAfter = ['div', 'h1', 'h2', 'h3', 'h4', 'p', 'ul', 'li'];

    return html
        .split('')
        .reduce((output, char, index) => 

            if (char === '<') 
                tagToCome = whichTag(html, index);
                shouldBreakBefore = tagToCome && breakBefore.indexOf(tagToCome) >= 0;
                mode = 'TAG';
                inTag = true;
                output += (shouldBreakBefore ? br(indent) : '') + '<';
             else if (char === '/' && mode == 'TAG') 
                mode = 'CLOSING_TAG'
                inTag = true;
                output += '/';
             else if (char === ' ') 
                inTag = false;
                output += ' ';
             else if (char === '>') 
                if (mode === 'TAG' || mode === 'CLOSING_TAG') 
                    indent += mode === 'TAG' ? +1 : -1;

                    shouldBreakAfter = breakAfter.indexOf(tag) >= 0;
                    inTag = false;
                    tag = '';
                
                output += '>';
                output += shouldBreakAfter ? br(indent) : '';
             else 
                output += char;

                if (inTag) 
                    tag += char;
                
            

            return output;
        , '');

萨斯:

export const prettifyScss = (scss) => 
    let indent = 0,
        closeBefore = 0;

    return scss
        .split('')
        .reduce((output, char) => 

            closeBefore++;

            if (char === '') 
                indent++;
                output += '' + br(indent);
             else if (char === '') 
                indent--;
                output += br(indent) + '' + (closeBefore > 3 ? '\n' : '') + _tabs(indent);
                closeBefore = 0;
             else if (char === '.') 
                output += br(indent) + '.';
             else if (char === ';') 
                output += ';' + br(indent);
             else 
                output += char;
            

            return output;
        , '');

辅助方法:

const _tabs = (number) => 
    let output = '';

    for (let cnt = 0; cnt < number; cnt++) 
        output += '\t';
    

    return output;


const br = (indent) => 
    return '\n' + _tabs(indent);


export const whichTag = (html, index) => 
    let inTag = true,
        tag = '';

    const arr = html.split('');

    for (let i = index + 1; i < index + 10; i++) 
        const char = arr[i];

        if (char >= 'a' && char <= 'z' && inTag) 
            tag += char;
         else if (char !== '/') 
            inTag = false;
        
    

    return tag;

【讨论】:

【参考方案4】:

遇到了同样的问题,但通过添加两个脚本文件解决了这个问题。

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-beautify.js"></script>

【讨论】:

【参考方案5】:

您可能需要在打开页面时在加载窗口后执行beautify.beautify,以便初始化editor.session

window.addEventListener('load', () => 
  beautify.beautify(editor.session)
)

【讨论】:

【参考方案6】:

Ace 编辑器仅对php 使用美化,它是在 ace 文档中编写的。

对我来说,最好的解决方案是https://github.com/beautify-web/js-beautify

有很多设置,Js/CSS/HTML美化,npmpythonimportrequired等等。

import beautify from 'js-beautify';

// your code

beautifyHTML() 
    this.html = beautify.html(this.html, 
      indent_size: '2',
      indent_char: ' ',
      max_preserve_newlines: '5',
      preserve_newlines: true,
      keep_array_indentation: false,
      break_chained_methods: false,
      indent_scripts: 'normal',
      brace_style: 'expand',
      space_before_conditional: true,
      unescape_strings: false,
      jslint_happy: false,
      end_with_newline: false,
      wrap_line_length: '80',
      indent_inner_html: true,
      comma_first: false,
      e4x: false
    );
  

查看更多文档和设置here

【讨论】:

【参考方案7】:

在美化文件中,只需将美化指向窗口(全局对象),然后您就可以从全局对象调用美化。 ext-beautify.js 在第 330 行添加

window.beautify = exports;

那你就可以用了。

vm.session = vm.editor.getSession();
beautify.beautify(vm.session);

【讨论】:

以上是关于如何在 Ace Editor 中使用美化功能?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用自定义模式在 Ace Editor 中集成语法检查?

如何侦听 Ace Editor 更改事件并做出反应

在 Ace Editor 中对多个光标执行方法

python测试开发django -144.Ace Editor 在线编辑python代码

ACE Editor 常用Api

添加到 ace-editor 明智的自动完成功能:列出用户定义的函数和变量(javascript 语言)