今天给大家分享一个超强大开源的基于web云端代码编辑器ACE Editor。
![b089ba54bc09e484a01ed9492606c91f.png](https://i-blog.csdnimg.cn/blog_migrate/283b203a8fa838cf184c9151c84ccb01.jpeg)
Ace 基于 JavaScript 编写的浏览器可嵌入式代码编辑器,Star高达21.9K+。
![51d07a3d084da0efe71c571b250b94c5.gif](https://i-blog.csdnimg.cn/blog_migrate/f40fa59157eee0b7f5f1ecce75c28488.gif)
号称性能和功能可以媲美于Sublime,Vim等本地编辑器。可以轻松地嵌入到任何网页和JavaScript应用程序中。
ACE支持超过40种语言语法高亮 PHP、Javascript、HTML、CSS、Java、C++、Python等。
![fe7727627b7415df650e0f3b52d3779c.gif](https://i-blog.csdnimg.cn/blog_migrate/f757de1eb62a4c76c1653597e0af5c38.gif)
功能特性
- 语法高亮:支持 40 多种语言的语法高亮 (可以导入 TextMate/Sublime 等文件)
- 自动缩排
- 更换主题:支持超过20多款主题
- 自定义快捷键绑定
- 搜索和替换支持正则表达式
- 高亮选中
- 可以处理大型文档(能够处理代码多达400万行)
- 在线语法检测器
简单使用
some text
配置主题及语言模式
// 设置主题editor.setTheme("ace/theme/clouds");// oreditor.setTheme("ace/theme/twilight");
默认情况下,编辑器为纯文本,所有其他语言模式都可以作为单独的模块按需引入。
// 设置语言editor.session.setMode("ace/mode/javascript");// oreditor.session.setMode("ace/mode/html");// oreditor.session.setMode("ace/mode/php");
![fc63b1f26543ea838bf639d6398ad90b.png](https://i-blog.csdnimg.cn/blog_migrate/b7a116ddaf90c00cb4d20376de3c542e.jpeg)
demo示例
Demo of ACE Editor
function cloneObject(obj) { var newObj = {} //如果不是引用类型,直接返回 if (typeof obj !== 'object') { return obj } //如果是引用类型,遍历属性 else { for (var attr in obj) { //如果某个属性还是引用类型,递归调用 newObj[attr] = cloneObject(obj[attr]) } } return newObj}
上面代码运行效果如下
![b0ebcd360065c49de0de15621351c34f.gif](https://i-blog.csdnimg.cn/blog_migrate/4653724a42915ba3a20c5f56760023a5.gif)
官网提供了丰富的文档及API方法。
![36d0cd29e76b7ddd9185f96951427184.png](https://i-blog.csdnimg.cn/blog_migrate/f00a75c8d40405ac86271d20e21e1fbc.jpeg)
![f440b2fd8172bcb9e5b3f3587c1698ca.png](https://i-blog.csdnimg.cn/blog_migrate/99cb29d4e4e561d3aa808037523f8a53.jpeg)
![6b0652f2721069fbad91d5a1707aec5b.png](https://i-blog.csdnimg.cn/blog_migrate/c6f7858e63d3487bb95be546812aeafa.jpeg)
附上文档及项目地址
# 文档地址https://ace.c9.io/# 仓库地址https://github.com/ajaxorg/ace
ok,就介绍到这里。如果大家感兴趣可以去看下哈,欢迎一起交流讨论!