ACE Editor接入指南

说明：ACE 是一个实现了语法着色功能的基于 Web 的代码编辑器，具有良好的代码提示功能和大量的主题，所以在Web端你想拥有一个编辑器，ACE是不二选择。
正是因为在这上面踩了一个大大的坑，而且文档基本都是英文的，并不是说英文文档就看不懂，但是麻烦啊，所以有必要特此说明下这玩意到底应该怎么用。
官方网址：[https://ace.c9.io/](https://ace.c9.io/)
Github地址：[https://github.com/ajaxorg/ace](https://github.com/ajaxorg/ace)
Github地址2：[https://github.com/ajaxorg/ace-builds](https://github.com/ajaxorg/ace-builds)
有问题去这里找解决方案：[http://stackoverflow.com/](http://stackoverflow.com/)
效果：[http://tool.jtahstu.com/compile/1](http://tool.jtahstu.com/compile/1)

引入头文件

首先这里就是个大坑，js文件是不能乱引入的，虽然同样是ace.js，但是却大不相同，在上面第一个github的地址引入进去的话是不能用的，应为他竟然`没有编译`，你在逗我？第二个地址我没试，可能是可以的，你可以下下来尝试一下。

所以我们的解决方法就是从cdn引入，这里本人使用的是bootstrap中文网提供的cdn服务，主页是 [http://www.bootcdn.cn/](http://www.bootcdn.cn/) ,本人也是经常使用这个cdn的，ACE项目的地址是 [http://www.bootcdn.cn/ace/](http://www.bootcdn.cn/ace/)

<script src="http://cdn.bootcss.com/ace/1.2.4/ace.js"></script>
<script src="http://cdn.bootcss.com/ace/1.2.4/ext-language_tools.js"></script>
<script src="http://cdn.bootcss.com/ace/1.2.4/ext-old_ie.js"></script>
<script src="http://cdn.bootcss.com/ace/1.2.4/theme-monokai.js"></script>

ok，引入这四个文件
解释一下
- 第一个js文件是编辑器的最主要文件

- 第二个js文件是用来提供代码提示和自动补全的插件

- 第三个js文件看名字就知道，是为了兼容旧版本IE的，IE虽然恶心，但是谁叫他是操作系统中的爸爸呢

- 第四个js文件是编辑器的主题插件，这里采用monokai插件，为什么？好看啊

编辑器

<div class="" id="compile-editor-div">
<div id="compile-editor" name="" class=" form-control">
/**
 * Created on: 2016年09月16日 10:52:56
 * Author: Guest
 * Copyright (c) 2016, tool.usta.wiki , All Rights Reserved.
 */
#include &lt;stdio.h&gt;

int main()
{
   /* 我的第一个 C 程序 */
   printf(&quot;Hello, World! \n&quot;);
   return 0;
}
</div>
</div>

$('#compile-editor').height(600);

这个是我这个项目中的写法，自己写的话可以写的简单一点

<pre id="editor"></pre>

像这样写就可以了，然后需要给个长宽

#editor {
    position: absolute;
    width: 500px;
    height: 400px;
}

后面需要像这样写

require("ace/ext/old_ie");
ace.require("ace/ext/language_tools");
var editor = ace.edit("compile-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/monokai");

当然啦本人这写的东西还是不少的，不然功能不完整，OK，一句一句解释

1. 引入兼容IE的模块

2. 引入代码补全和提示模块

3. 以id为compile-editor的html元素创建编辑器

4. 不知道，这个是解决ace.js的不知道为啥报错问题

5. 设置编辑器里字体的大小，貌似这个可以在外面加CSS样式，但是我试了不行，所以这样写

6. 设置代码补全和提示的语法为c/c++，这个需要为不同的语言写不同的模块，不然没有提示功能

7. 这个到大括号结束是说设置编辑器是否自动补全，是否自动提示等

8. 设置主题为monokai

其他功能和技巧可以去官网或 Github 找找看，但是还是推荐去 Strck Overflow 上 Search。

---

本文章采用知识共享署名2.5中国大陆许可协议进行许可，转载必须注明作者和本文链接。