介绍
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-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