首先说明：ACE 是一个实现了语法着色功能的基于 Web 的代码编辑器，具有良好的代码提示功能和大量的主题，所以在Web端你想拥有一个编辑器，ACE是不二选择。

正是因为在这上面踩了一个大大的坑，而且文档基本都是英文的，并不是说英文文档就看不懂，但是麻烦啊，所以有必要特此说明下这玩意到底应该怎么用。

先上一个我最后的结果



是不是很棒？

好，然后接下来就是我研究的步骤了

1.下载

（需要git环境）

git clone https://github/ajaxorg/ace.git
没什么好说的就是git

2.生成build版

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

npm install
node ./Makefile.dryice.js
两条命令都执行，然后在build文件就会有了



以上两步不懂，可以回去看看参考我之前的文章【完整安装的过程和安装npm模块插件整理（图文包括踩过的坑）】

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:100px;
         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功能一致

这些一般基本够用了，附上我的配置 

ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.$blockScrolling = Infinity;
editor.setFontSize(16);
editor.session.setMode("ace/mode/c_cpp");
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});
editor.setTheme("ace/theme/chrome");


更多推荐

Ace Editor在线Web编辑代码强力武器