Ace Editor使用心得

最新推荐文章于 2024-05-30 10:51:04 发布

jyjin

最新推荐文章于 2024-05-30 10:51:04 发布

阅读量2.4w

点赞数 9

分类专栏：代码技术文章标签： ace editor

本文链接：https://blog.csdn.net/jianleking/article/details/53397455

版权

代码技术专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.下载

（需要git环境）

git clone https://github.com/ajaxorg/ace.git

2.生成build版

下载后可发布build版，减轻带宽压力。你只需进入项目根目录，运行一下命令（需要node环境）

npm install
node ./Makefile.dryice.js

3.引入

在html引入核心依赖文件

<script src="/build/src/ace.js" type="text/javascript"></script>

注意：

   1.mode打头的文件一般为开发语言支持依赖包，你只需要保留你所要编辑语言依赖包就够了

   2.theme打头是编辑器皮肤文件，这个东西一般情况一个就够了

   3.相关依赖包的加载都是ace内部定义的require加载动态加载的，当调用了相关功能，浏览器会发请求加载相关依赖包，所以慎重选择你需要剔除的依赖包。真删了也不用着急，找到相应的包文件加回去就可以了

4.常用api

鉴于官网好多api方法undocumented，以下列出几个常用的方法，供大家使用：

1.初始化editor(）

ace.edit(domIdStr[string])

domIdStr: dom元素id字符串（不加#）
return  : editor对象

举例

<style>
     #editor{
         width:600px;
         height:300px;
     }
</style>
<div id="editor"></div>
<script>
     var editor = ace.edit('editor');
</script>

注意：

必须给包裹元素设置宽高

2.设置主题

editor.setTheme(moduleId)

moduleId:  theme文件路径

举例

editor.setTheme("ace/theme/monokai");
editor.setTheme("ace/theme/twilight");

3.设置编辑语言

editor.getSession().setMode("ace/mode/html");

4.获取编辑内容

editor.getValue();

5.设置编辑内容

var editorValue='<body></body>';
editor.setValue(editorValue);

6.移动光标

editor.moveCursorTo(0, 0);//移动光标至第0行，第0列

7.编辑内容搜索

editor.execCommand('find');//与ctrl+f功能一致

备注：
其实上面clone的源码包，可以node生成本地文档，但是好多资源地址还是国外的，想要加载完整的本地api还是得翻墙。换言之，都能翻墙了，你还要本地api干嘛。

贴上ace官网地址：https://ace.c9.io/

jyjin

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
Ace Editor使用心得

1.下载（需要git环境）git clone https://github.com/ajaxorg/ace.git2.生成build版下载后可发布build版，减轻带宽压力。你只需进入项目根目录，运行一下命令（需要node环境）npm installnode ./Makefile.dryice.js3.引入在html引入核心依赖文件&lt;sc...
复制链接

扫一扫