专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

开源web云端代码编辑器Ace 代码云端编程

ins518 2024-10-05 20:40:58 技术文章 33 ℃ 0 评论

今天给大家分享一个超强大开源的基于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万行)
  • 在线语法检测器

简单使用

<div id="editor" style="height: 500px; width: 500px">some text</div>
<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示例

<!DOCTYPE html>
<html>
<head>
  <title>Demo of ACE Editor</title>
  <!--导入js库-->
  <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>
</head>
      
<body>
<!--代码输入框（注意请务必设置高度，否则无法显示）-->
<pre id="code" class="ace_editor" style="min-height:400px">
<textarea class="ace_text-input">
function cloneObject(obj) {
  var newObj = {} //如果不是引用类型，直接返回
  if (typeof obj !== 'object') {
    return obj
  }
  //如果是引用类型，遍历属性
  else {
    for (var attr in obj) {
      //如果某个属性还是引用类型，递归调用
      newObj[attr] = cloneObject(obj[attr])
    }
  }
  return newObj
}
</textarea>
</pre>

<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>
</body>
 </html>

上面代码运行效果如下

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

附上文档及项目地址

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

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

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

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表