php整合ace编纂器技巧_开源web云端代码编辑器Ace

文章目录 [+]

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");// oreditor.setTheme("ace/theme/twilight");
默认情形下，编辑器为纯文本，所有其他措辞模式都可以作为单独的模块按需引入。
// 设置措辞editor.session.setMode("ace/mode/javascript");// oreditor.session.setMode("ace/mode/html");// oreditor.session.setMode("ace/mode/php");
demo示例
<!DOCTYPE html><html><head> <title>Demo of ACE Editor</title>  <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，就先容到这里。
如果大家感兴趣可以去看下哈，欢迎一起互换谈论！

标签：34 editor