版权声明:本文为博主原创文章,未经博主允许不得转载。 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/