java 在线编辑器_开源web云端代码编辑器Ace

  • Post author:
  • Post category:java


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

b089ba54bc09e484a01ed9492606c91f.png


Ace

基于 JavaScript 编写的浏览器可嵌入式代码编辑器,

Star高达21.9K+

51d07a3d084da0efe71c571b250b94c5.gif

号称性能和功能可以媲美于

Sublime,Vim

等本地编辑器。可以轻松地嵌入到任何网页和JavaScript应用程序中。

ACE支持超过

40

种语言语法高亮


PHP、Javascript、HTML、CSS、Java、C++、Python


等。

fe7727627b7415df650e0f3b52d3779c.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


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

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

36d0cd29e76b7ddd9185f96951427184.png
f440b2fd8172bcb9e5b3f3587c1698ca.png
6b0652f2721069fbad91d5a1707aec5b.png

附上文档及项目地址

# 文档地址https://ace.c9.io/# 仓库地址https://github.com/ajaxorg/ace

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