ACE Editor接入指南

最新推荐文章于 2024-08-13 14:51:21 发布

jtahstu

最新推荐文章于 2024-08-13 14:51:21 发布

阅读量1.2w

点赞数 1

分类专栏： study 文章标签：编辑器 web

本文链接：https://blog.csdn.net/jtahstu/article/details/52567107

版权

study 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

ACE Editor接入指南

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

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

官方网址：https://ace.c9.io/

Github地址：https://github.com/ajaxorg/ace

Github地址2：https://github.com/ajaxorg/ace-builds

有问题去这里找解决方案：http://stackoverflow.com/

效果：http://tool.jtahstu.com/compile/1

引入头文件

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

所以我们的解决方法就是从cdn引入，这里本人使用的是bootstrap中文网提供的cdn服务，主页是 http://www.bootcdn.cn/ ,本人也是经常使用这个cdn的，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");