Ace(在线代码编辑器)介绍、使用-CFANZ编程社区

介绍

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
github：https://github.com/ajaxorg/ace
在线demo：https://ace.c9.io/build/kitchen-sink.html

使用

可以非常轻松的将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会看到控制台报如下错误：（没有语法校验功能）

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

解决方法：在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. Just copy one of src* subdirectories somewhere into your project, or use RequireJS to load the contents of lib/ace folder as ace

其他

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

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

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