1. 程式人生 > >ACE 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模式

專案地址:

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

相關專案:

使用引導:
1、引入

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

2、設定主題

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

3、設定程式語言模式

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

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

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

獲取選擇內容:

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

在游標處插入:

  1. editor.insert("Something cool");

獲取游標所在行或列:

  1. editor.selection.getCursor();

跳轉到行:

  1. editor.gotoLine(lineNumber);

獲取總行數:

  1. editor.session.getLength();

設定預設製表符的大小:

  1. editor.getSession().setTabSize(4);

使用軟標籤:

  1. editor.getSession().setUseSoftTabs(true);

設定字型大小,這個其實不算API:

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

設定程式碼摺疊:

  1. editor.getSession().setUseWrapMode(true);

設定高亮:

  1. editor.setHighlightActiveLine(false);

設定列印邊距可見度:

  1. editor.setShowPrintMargin(false);

設定編輯器只讀:

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

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

  1. editor.resize();

6、搜尋

  1. editor.find('needle',{
  2. backwards: false,
  3. wrap: false,
  4. caseSensitive: false,
  5. wholeWord: false,
  6. regExp: false
  7. });
  8. editor.findNext();
  9. editor.findPrevious();

下列選項可用於您的搜尋引數:
needle: 要查詢的字串或正則表示式
backwards: 是否反向搜尋,預設為false
wrap: 搜尋到文件底部是否回到頂端,預設為false
caseSensitive: 是否匹配大小寫搜尋,預設為false
wholeWord: 是否匹配整個單詞搜素,預設為false
range: 搜尋範圍,要搜素整個文件則設定為空
regExp: 搜尋內容是否是正則表示式,預設為false
start: 搜尋起始位置
skipCurrent: 是否不搜尋當前行,預設為false
替換單個字元:

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

替換多個字元:

  1. editor.replaceAll('bar');

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

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

監聽選擇事件:

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

監聽游標移動:

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

8、新增新命令、繫結按鍵
要指定鍵繫結到一個自定義函式:

  1. editor.commands.addCommand({
  2. name: 'myCommand',
  3. bindKey: {win: 'Ctrl-M', mac: 'Command-M'},
  4. exec: function(editor) {
  5. //...
  6. },
  7. readOnly: true // 如果不需要使用只讀模式,這裡設定false
  8. });