ACE Editor接入指南

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");

當然啦本人這寫的東西還是不少的，不然功能不完整，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 .