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