ACE 是一個開源的、獨立的、基於瀏覽器的代碼編輯器,能夠嵌入到任何web頁面或JavaScript應用程序中。ACE支持超過60種語言語法高亮,並可以處理代碼多達400萬行的大型文檔。ACE開發團隊稱,ACE在性能和功能上能夠媲美本地代碼編輯器(如Sublime Text、TextMate和Vim等)。javascript
ACE是Mozilla Skywriter(之前稱爲Bespin)項目的繼任者,並做爲Cloud9的主要在線編輯器。html
如下是它的詳細特性:java
- 能夠對60多種語言進行語法着色(能夠導入TextMate/Sublime/.tmlanguage 文件)
- 20多種主題(能夠導入TextMate/Sublime/.tmtheme文件)
- 自動縮進,減小縮進
- 一個可選的命令行
- 處理巨大的文件,能夠處理4,000,000行代碼
- 徹底自定義的鍵綁定,包括V正則表達式搜索和替換
- 高亮匹配括號
- 軟標籤和真正的標籤之間切換
- 顯示隱藏的字符
- 用鼠標拖放文本
- 換行
- 代碼摺疊
- 多個光標和選擇
- 實時語法檢查器(支持 JavaScript/CoffeeScript/CSS/XQuery)
- 剪切,複製和粘貼功能IM和Emacs模式
項目地址:git
- git clone git://github.com/ajaxorg/ace.git
相關項目:github
使用引導:
一、引入web
- var ace = require("lib/ace");
二、設置主題ajax
- editor.setTheme("ace/theme/twilight");
三、設置程序語言模式正則表達式
- editor.getSession().setMode("ace/mode/javascript");
四、通常經常使用操做
設置、獲取內容:api
- 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
五、觸發尺寸縮放
編輯器默認自適應大小,若是要程序控制resize,使用以下方法:
- editor.resize();
六、搜索
- 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', ...)
七、事件監聽
監聽改變事件:
- editor.getSession().on('change', function(e) {
- // e.type, etc
- });
監聽選擇事件:
- editor.getSession().selection.on('changeSelection', function(e) {
- });
監聽光標移動:
- editor.getSession().selection.on('changeCursor', function(e) {
- });
八、添加新命令、綁定按鍵
要指定鍵綁定到一個自定義函數:
- 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