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 <stdio.h> int main() { /* 我的第一个 C 程序 */ printf("Hello, World! \n"); 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。
到此,介绍结束,2016/9/16 19:30:00 by jtahstu,All Rights Reserved .
---
本文章采用 知识共享署名2.5中国大陆许可协议 进行许可,转载必须注明作者和本文链接。
---
发表评论