今天给大家分享一个超强大开源的基于web云端代码编辑器ACE Editor。

Ace 基于 JavaScript 编写的浏览器可嵌入式代码编辑器，Star高达21.9K+。

号称性能和功能可以媲美于Sublime，Vim等本地编辑器。可以轻松地嵌入到任何网页和JavaScript应用程序中。

ACE支持超过40种语言语法高亮 PHP、Javascript、HTML、CSS、Java、C++、Python等。

功能特性

• 语法高亮：支持 40 多种语言的语法高亮 (可以导入 TextMate/Sublime 等文件)
• 自动缩排
• 更换主题：支持超过20多款主题
• 自定义快捷键绑定
• 搜索和替换支持正则表达式
• 高亮选中
• 可以处理大型文档(能够处理代码多达400万行)
• 在线语法检测器

简单使用

some text
<script src="src/ace.js" type="text/javascript"></script>
<script>
    var editor = ace.edit("editor");
</script>

配置主题及语言模式

// 设置主题
editor.setTheme("ace/theme/clouds");
// or
editor.setTheme("ace/theme/twilight");

默认情况下，编辑器为纯文本，所有其他语言模式都可以作为单独的模块按需引入。

// 设置语言
editor.session.setMode("ace/mode/javascript");
// or
editor.session.setMode("ace/mode/html");
// or
editor.session.setMode("ace/mode/php");

demo示例

  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"></script>

      


function cloneObject(obj) {
  var newObj = {} //如果不是引用类型，直接返回
  if (typeof obj !== 'object') {
    return obj
  }
  //如果是引用类型，遍历属性
  else {
    for (var attr in obj) {
      //如果某个属性还是引用类型，递归调用
      newObj[attr] = cloneObject(obj[attr])
    }
  }
  return newObj
}



<script type="text/javascript">
  //初始化对象
  editor = ace.edit("code");
  //设置风格和语言（更多风格和语言，请到github上相应目录查看）
  theme = "clouds"
  language = "javascript"
  editor.setTheme("ace/theme/" + theme);
  editor.session.setMode("ace/mode/" + language);

  //字体大小
  editor.setFontSize(20);
  //设置只读（true时只读，用于展示代码）
  editor.setReadOnly(false); 

  //自动换行,设置为off关闭
  editor.setOption("wrap", "free")

  //启用提示菜单
  ace.require("ace/ext/language_tools");
  editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
  });
</script>

 

上面代码运行效果如下

官网提供了丰富的文档及API方法。

附上文档及项目地址

# 文档地址
https://ace.c9.io/

# 仓库地址
https://github.com/ajaxorg/ace

ok，就介绍到这里。如果大家感兴趣可以去看下哈，欢迎一起交流讨论！