Ace一款用JavaScript编写的独立代码编辑器

Ace (Ajax.org Cloud9 Editor)


Ace 是一款用 JavaScript 编写的独立代码编辑器。我们的目标是创建一个基于浏览器的编辑器,使其功能、易用性和性能与 TextMate、Vim 或 Eclipse 等现有原生编辑器相媲美,并得到进一步扩展。它可以轻松嵌入到任何网页或 JavaScript 应用程序中。Ace 是 Cloud9 IDE 的主要编辑器,也是 Mozilla Skywriter(Bespin)项目的继任者。

功能

  • 超过 120 种语言的语法高亮(可导入 TextMate/Sublime/.tmlanguage 文件)
  • 超过 20 个主题(可导入 TextMate/Sublime/.tmtheme 文件)
  • 自动缩进和取消缩进
  • 可选命令行
  • 处理海量文档(经测试,4,000,000 行是上限)
  • 完全可自定义的按键绑定,包括 vim 和 Emacs 模式
  • 使用正则表达式进行搜索和替换
  • 高亮匹配的括号
  • 在软制表符和真制表符之间切换
  • 显示隐藏字符
  • 使用鼠标拖放文本
  • 自动换行
  • 代码折叠
  • 多个光标和选择
  • 实时语法检查器(目前支持 JavaScript/CoffeeScript/CSS/XQuery)
  • 剪切、复制和粘贴功能

试用 Ace!

查看 Ace 的实时 演示 或注册一个 Cloud9 IDE 帐户,在编辑您自己的 GitHub 项目时体验 Ace。

如果您愿意,可以使用 Ace Bookmarklet 来使用 Ace 替代文本区域。

嵌入 Ace

Ace 可以轻松嵌入到任何现有网页中。您可以使用 ace 的预打包版本(只需将 src* 子目录复制到项目中的某个位置即可),或者使用 requireJS 将 lib/ace 的内容加载为 ace

最简单的版本如下:

html 复制代码
<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
</script>

探索配置选项 Configuring-Ace

其中“editor”是 DOM 元素的 ID,该元素应转换为编辑器。请注意,该元素必须明确指定“绝对”或“相对”的大小和位置,Ace 才能正常工作。例如:

css 复制代码
#editor {
    position: absolute;
    width: 500px;
    height: 400px;
}

要更改主题,只需包含主题的 JavaScript 文件

html 复制代码
<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>

并配置编辑器以使用主题:

javascript 复制代码
editor.setTheme("ace/theme/twilight");

默认情况下,编辑器仅支持纯文本模式;许多其他语言可作为单独的模块使用。添加该模式的 JavaScript 文件后:

html 复制代码
<script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>

然后可以像这样使用该模式:

javascript 复制代码
var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
editor.session.setMode(new JavaScriptMode());

销毁编辑器的使用

javascript 复制代码
editor.destroy();
editor.container.remove();

文档

更多使用信息,包括监听事件和扩展语法高亮器,可在 Ace 主网站 上找到。

您还可以在 https://ajaxorg.github.io/ace-api-docs/ 找到 API 文档。

还可以查看 Kitchen Sink 演示应用 的示例代码。

如果您仍然需要帮助,请随时在我们的 讨论页面 上提问。

运行 Ace

检出后,Ace 开箱即用。无需构建步骤。要试用,只需使用 Node.JS 启动捆绑的迷你 HTTP 服务器即可。

bash 复制代码
node ./static.js

然后可以通过 http://localhost:8888/kitchen-sink.html 打开编辑器。

要使用 file:/// URL 打开编辑器,请参阅 wiki

构建 Ace

通常情况下,您无需构建 ACE。ace-builds 仓库 会尽力维护最新版本,您只需将 src* 子目录复制到项目中即可。

不过,您只需要安装 Node.js 和 npm 即可打包 ACE。只需在 ace 文件夹中运行 npm install 即可安装依赖项:

bash 复制代码
npm install
node ./Makefile.dryice.js

为了打包 Ace,我们使用 Mozilla Skywriter 团队开发的 dryice 构建工具。在命令行中运行 node Makefile.dryice.js 即可开始打包。此构建脚本接受以下选项:

bash 复制代码
-m 使用 uglify-js 压缩构建文件
-nc namespace require 并使用 "ace" 定义定义
-bm 构建书签版本
--target ./path 指定输出文件夹的相对路径(默认值为 "./build"

要生成 ace-builds 仓库中的所有文件,请运行 node Makefile.dryice.js full --target ../ace-builds

运行单元测试

Ace 单元测试可以在 node.js 上运行。假设您已经执行了 npm install,只需调用:

bash 复制代码
npm run test

您也可以通过以下方式在浏览器中运行测试:

http://localhost:8888/src/test/tests.html

这使得调试失败的测试变得更加容易。

贡献

Ace 是一个社区项目,如果没有贡献,就不会有今天的成就!我们积极鼓励和支持贡献。Ace 源代码采用 BSD 许可证发布。该许可证非常简单,并且对各种项目(无论是否开源)都友好。掌控您的编辑器,添加您喜欢的语言高亮和快捷键!

您可以随意 fork 并以任何您想要的方式改进/增强 Ace。如果您认为您的更改将使编辑器或 Ace 社区受益,请提交拉取请求。有关我们贡献指南的更多信息,请参阅 CONTRIBUTING.md

关于项目

Ace 是一款用 JavaScript 编写的独立代码编辑器。它的目标是创建一个基于浏览器的编辑器,使其功能、易用性和性能与 TextMate、Vim 或 Eclipse 等现有原生编辑器相媲美,并得到进一步扩展。它可以轻松嵌入到任何网页或 JavaScript 应用程序中。
Other
Javascript
27,079
5287
586
2010-10-27
2025-11-12

增长趋势 - stars