Ace Editor使用心得

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianleking/article/details/53397455

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/

猜你喜欢

转载自blog.csdn.net/jianleking/article/details/53397455
ACE