jtahstu的博客

1373758426   root@jtahstu.com   Git仓库   英文博客  

最新碎语:以后没事写写小的知识点吧

您的位置:jtahstu的博客 >笔记> ACE Editor接入指南

ACE Editor接入指南

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。


    到此,介绍结束,2016/9/16 19:30:00 by jtahstu,All Rights Reserved .

---

本文章采用 知识共享署名2.5中国大陆许可协议 进行许可,欢迎转载,演绎或用于商业目的。

---

二维码加载中...

扫一扫移动端访问O(∩_∩)O

发表评论

62 + 75 =
路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交
正在加载中……