ACE Editor在線代碼編輯器簡介及使用引導打賞

Ace_ERD2019-7-27更新:如果你在找一款合適的在線代碼編輯器,強烈建議采用微軟最新開源的Monaco Editor,詳見文章用Monaco Editor取代Ace Editor

ACE 是一個開源的、獨立的、基于瀏覽器的代碼編輯器,可以嵌入到任何web頁面或JavaScript應用程序中。ACE支持超過60種語言語法高亮,并能夠處理代碼多達400萬行的大型文檔。ACE開發團隊稱,ACE在性能和功能上可以媲美本地代碼編輯器(如Sublime Text、TextMate和Vim等)。

ACE是Mozilla Skywriter(以前稱為Bespin)項目的繼任者,并作為Cloud9的主要在線編輯器。

以下是它的詳細特性:

  • 可以對60多種語言進行語法著色(可以導入TextMate/Sublime/.tmlanguage 文件)
  • 20多種主題(可以導入TextMate/Sublime/.tmtheme文件)
  • 自動縮進,減少縮進
  • 一個可選的命令行
  • 處理巨大的文件,可以處理4,000,000行代碼
  • 完全自定義的鍵綁定,包括V正則表達式搜索和替換
  • 高亮匹配括號
  • 軟標簽和真正的標簽之間切換
  • 顯示隱藏的字符
  • 用鼠標拖放文本
  • 換行
  • 代碼折疊
  • 多個光標和選擇
  • 實時語法檢查器(支持 JavaScript/CoffeeScript/CSS/XQuery)
  • 剪切,復制和粘貼功能IM和Emacs模式

項目地址:

git clone git://github.com/ajaxorg/ace.git

相關項目:

使用引導:
1、引入

var ace = require("lib/ace");

2、設置主題

editor.setTheme("ace/theme/twilight");

3、設置程序語言模式

editor.getSession().setMode("ace/mode/javascript");

4、一般常用操作
設置、獲取內容:

editor.setValue("the new text here"); // or session.setValue
editor.getValue(); // or session.getValue

獲取選擇內容:

editor.session.getTextRange(editor.getSelectionRange());

在光標處插入:

editor.insert("Something cool");

獲取光標所在行或列:

editor.selection.getCursor();

跳轉到行:

editor.gotoLine(lineNumber);

獲取總行數:

editor.session.getLength();

設置默認制表符的大小:

editor.getSession().setTabSize(4);

使用軟標簽:

editor.getSession().setUseSoftTabs(true);

設置字體大小,這個其實不算API:

document.getElementById('editor').style.fontSize='12px';

設置代碼折疊:

editor.getSession().setUseWrapMode(true);

設置高亮:

editor.setHighlightActiveLine(false);

設置打印邊距可見度:

editor.setShowPrintMargin(false);

設置編輯器只讀:

editor.setReadOnly(true);  // false to make it editable

5、觸發尺寸縮放
編輯器默認自適應大小,如果要程序控制resize,使用如下方法:

editor.resize();

6、搜索

editor.find('needle',{
    backwards: false,
    wrap: false,
    caseSensitive: false,
    wholeWord: false,
    regExp: false
});
editor.findNext();
editor.findPrevious();

下列選項可用于您的搜索參數:
needle: 要查找的字符串或正則表達式
backwards: 是否反向搜索,默認為false
wrap: 搜索到文檔底部是否回到頂端,默認為false
caseSensitive: 是否匹配大小寫搜索,默認為false
wholeWord: 是否匹配整個單詞搜素,默認為false
range: 搜索范圍,要搜素整個文檔則設置為空
regExp: 搜索內容是否是正則表達式,默認為false
start: 搜索起始位置
skipCurrent: 是否不搜索當前行,默認為false
替換單個字符:

editor.find('foo');
editor.replace('bar');

替換多個字符:

editor.replaceAll('bar');

editor.replaceAll使用前需要先調用editor.find('needle', ...)
7、事件監聽
監聽改變事件:

editor.getSession().on('change', function(e) {
    // e.type, etc
});

監聽選擇事件:

editor.getSession().selection.on('changeSelection', function(e) {
});

監聽光標移動:

editor.getSession().selection.on('changeCursor', function(e) {
});

8、添加新命令、綁定按鍵
要指定鍵綁定到一個自定義函數:

editor.commands.addCommand({
    name: 'myCommand',
    bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
    exec: function(editor) {
        //...
    },
    readOnly: true // 如果不需要使用只讀模式,這里設置false
});

詳細API:http://ace.c9.io/#nav=api

使用引導部分翻譯可能有部分歧義,請諒解,最初接觸是因為liferay的aui團隊使用了,我想提取出來,看了源碼發現是另外一個叫ace的開源框架,沒事就找了找,轉出來分享下。

ACE Editor在線代碼編輯器簡介及使用引導
文章《ACE Editor在線代碼編輯器簡介及使用引導》二維碼
  • 微信打賞
  • 支付寶打賞

已有7條評論

  1. 灑家鄭

    是即時顯示,不用刷新或其他任何操作

    2016-06-07 20:19 回復
    • 樸人博客

      很早的文章了,我也很久沒看過ace,不知現在是不是有什么新功能,不過就算沒有此類功能,可以直接監聽change事件,通過js reload頁面,此類網站一般都是iframe做的,相當于有多個窗口,reload相應窗口即可

      2016-06-07 22:45 回復
  2. 灑家鄭

    請問博主哪里有介紹ACE的”實時預覽“(也不知道這個詞合不合適,反正應該就是英語中的WYSIWYG: what you see is what you get)功能呢, 具體見實例慕課網實例(需要登錄)如果從圖中可見最右邊的空白處實時顯示代碼的執行結果,不知道這是ACE的功能還是慕課網整合的。對于這種一邊碼代碼,一邊即時顯示渲染結果的原理希望博主能帶帶前端小白。

    2016-06-07 18:29 回復
  3. xy2401

    終于用google搜到一個介紹了,都不會用的說

    2014-06-29 15:26 回復
  4. 六網賺博客

    博客為什么不添加廣告?

    2013-12-24 10:33 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖