Ace(在线代码编辑器)介绍、使用

小灰灰 2021-05-12 11:50 2311阅读 0赞

### 介绍 ###

Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。 Ace一直是[Cloud9 IDE][]的主要编辑器，并且是Mozilla Skywriter（Bespin）项目的后继者。主要包括以下特性：

*  超过110种语言的语法高亮显示（可以导入TextMate / Sublime Text.tmlanguage文件）
 *  超过20个主题（可以导入TextMate / Sublime Text .tmtheme文件）
 *  自动缩进和缩进
 *  可选命令行
 *  处理大量文档（似乎限制为四百万行！）
 *  完全可定制的按键绑定，包括vim和Emacs模式
 *  搜索并替换为正则表达式
 *  突出显示匹配的括号
 *  在软标签和真实标签之间切换
 *  显示隐藏的字符
 *  使用鼠标拖放文本
 *  换行
 *  代码折叠
 *  多个光标和选择
 *  实时语法检查器（当前为JavaScript / CoffeeScript / CSS / XQuery）
 *  剪切，复制和粘贴功能

Ace是一个开源的项目：

*  官网：[https://ace.c9.io/\#nav=embedding][https_ace.c9.io_nav_embedding]
 *  github：[https://github.com/ajaxorg/ace][https_github.com_ajaxorg_ace]
 *  在线demo：[https://ace.c9.io/build/kitchen-sink.html][https_ace.c9.io_build_kitchen-sink.html]

相关项目：

*  [Ace collaboration extension][]
 *  [Paredit extension for ace][]
 *  [Ace wrapper for ExtJS][]
 *  [Ace wrapper for GWT][]

### 使用 ###

可以非常轻松的将Ace嵌入到已有网页中。可以在 [ace-builds][] repository中获取相关的库文件（src、min、conflict...），也可以通过cdn获取对应的库文件，例如：[PageCDN][], [jsDelivr][] or [cdnjs][].

我们看一个示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>ACE in Action</title>
    <style type="text/css" media="screen">
        #editor { 
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
    </head>
    <body>
    
    <div id="editor">
    </div>
         
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/worker-json.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-json.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/theme-textmate.min.js"></script>
    <script>
    var obj =  {
            "myProp": "myValue",
            "subObj": {
                "prop": "value"
            }
        };
    document.getElementById('editor').innerHTML = JSON.stringify(obj,null,2);
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/textmate");
    var JavaScriptMode = ace.require("ace/mode/json").Mode;
    editor.session.setMode(new JavaScriptMode());
    </script>
    </body>
    </html>

本地打开后即可预览。在编辑器中写代码时，F12会看到控制台报如下错误：（没有语法校验功能）

![20200921210414849.png][]

解决方法：在[ace-builds][] repository中找到worker-json.js，将其和html页面放在一个目录下即可。这时，在编辑框中写代码时就会出现语法检查等。

此外，在[ace-builds][] repository中，可以通过[editor.html][]或[simple example][]查看有关将ace嵌入网页的简单方法。要查看ace的实际应用，请转到[kitchen-sink-demo][]，[scrollable-page-demo][]或[demo][]

If you want to clone and host Ace locally you can use one of the [pre-packaged versions][ace-builds]. Just copy one of `src*` subdirectories somewhere into your project, or use RequireJS to load the contents of [lib/ace][lib_ace] folder as `ace`

### 其他 ###

jquery有一个对比的插件，官网：[https://plugins.jquery.com/pretty-text-diff/][https_plugins.jquery.com_pretty-text-diff]

react也有一个ace的组件，该组件功能相对更强大（该组件支持：spell Editor和diff Editor），github：[https://github.com/securingsincity/react-ace][https_github.com_securingsincity_react-ace]

ace的npm版本叫做brace（browse ace），地址：[https://www.npmjs.com/package/brace][https_www.npmjs.com_package_brace]

[Cloud9 IDE]: https://c9.io/
[https_ace.c9.io_nav_embedding]: https://ace.c9.io/#nav=embedding
[https_github.com_ajaxorg_ace]: https://github.com/ajaxorg/ace
[https_ace.c9.io_build_kitchen-sink.html]: https://ace.c9.io/build/kitchen-sink.html
[Ace collaboration extension]: https://github.com/convergencelabs/ace-collab-ext
[Paredit extension for ace]: https://github.com/rksm/paredit.js
[Ace wrapper for ExtJS]: https://github.com/cadorn/ace-extjs
[Ace wrapper for GWT]: https://github.com/daveho/AceGWT
[ace-builds]: https://github.com/ajaxorg/ace-builds/
[PageCDN]: https://pagecdn.com/lib/ace
[jsDelivr]: http://www.jsdelivr.com/#!ace
[cdnjs]: http://cdnjs.com/libraries/ace/
[20200921210414849.png]: /images/20210511/449f1c363aad4bd09754e7b5b72fbfba.png
[editor.html]: https://github.com/ajaxorg/ace-builds/blob/master/editor.html
[simple example]: https://github.com/ajaxorg/ace-builds/tree/master/demo
[kitchen-sink-demo]: http://ajaxorg.github.com/ace-builds/kitchen-sink.html
[scrollable-page-demo]: http://ajaxorg.github.com/ace-builds/demo/scrollable-page.html
[demo]: http://ajaxorg.github.io/ace-builds/editor.html
[lib_ace]: https://github.com/ajaxorg/ace/tree/master/lib/ace
[https_plugins.jquery.com_pretty-text-diff]: https://plugins.jquery.com/pretty-text-diff/
[https_github.com_securingsincity_react-ace]: https://github.com/securingsincity/react-ace
[https_www.npmjs.com_package_brace]: https://www.npmjs.com/package/brace