Ace editor中文文件

餘以為發表於2020-10-27

介紹

Ace是一個用JavaScript編寫的可嵌入程式碼編輯器。它與Sublime，Vim和TextMate等本地編輯器的功能和效能相匹配。它可以輕鬆地嵌入任何網頁和JavaScript應用程式中。

官網地址：Ace - The High Performance Code Editor for the Web
Github: GitHub - ajaxorg/ace: Ace (Ajax.org Cloud9 Editor)
vue版：GitHub - chairuosen/vue2-ace-editor

快速開始

簡單使用

<div id="editor" style="height: 500px; width: 500px">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
</script>

設定主題和語言模式

要更改主題，請為編輯器配置要使用的主題路徑。主題檔案將按需載入：

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

預設情況下，編輯器為純文字模式。但是，所有其他語言模式都可以作為單獨的模組使用。語言模式也將按需載入：

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

編輯器狀態

Ace將所有編輯器狀態（選擇，滾動位置等）保留在editor.session中, 這對於製作可切換式編輯器非常有用：

var EditSession = require("ace/edit_session").EditSession
var js = new EditSession("some js code")
var css = new EditSession(["some", "css", "code here"])
// 要將文件載入到編輯器中，只需這樣呼叫
editor.setSession(js)

在專案中配置Ace

// 將程式碼模式配置到ace選項
ace.edit(element, {
    mode: "ace/mode/javascript",
    selectionStyle: "text"
})

// 使用setOptions方法一次設定多個選項
editor.setOptions({
    autoScrollEditorIntoView: true,
    copyWithEmptySelection: true,
});

// 單獨設定setOptions方法
editor.setOption("mergeUndoDeltas", "always");

// 一些選項也直接設定，例如：
editor.setTheme(...)

// 獲取選項設定值
editor.getOption("optionName");

// 核心Ace元件包括（editor, session, renderer, mouseHandler）
setOption(optionName, optionValue)
setOptions({
    optionName : optionValue
})
getOption(optionName)
getOptions()

設定和獲取內容：`

editor.setValue("the new text here"); // 或 session.setValue
editor.getValue(); // 或 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);

設定字型大小：

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

切換自動換行：

editor.getSession().setUseWrapMode(true);

設定行高亮顯示：

editor.setHighlightActiveLine(false);

設定列印邊距可見性：

editor.setShowPrintMargin(false);

設定編輯器為只讀：

editor.setReadOnly(true);  // false為可編輯

視窗自適應

編輯器僅在resize事件觸發時時調整自身大小。要想以其他方式調整編輯器div的大小，並且需要調整編輯器大小，請使用以下命令：

editor.resize()

在程式碼中搜尋

主要的ACE編輯器搜尋功能在 search.js.中定義。以下選項可用於搜尋引數：

  • needle: 要查詢的字串或正規表示式
  • backwards: 是否從當前游標所在的位置向後搜尋。預設為“false”
  • wrap: 當搜尋到達結尾時，是否將搜尋返回到開頭。預設為“false
  • caseSensitive: 搜尋是否應該區分大小寫。預設為“false”
  • wholeWord: 搜尋是否只匹配整個單詞。預設為“false”
  • range: 搜尋匹配範圍，要搜尋整個文件則設定為空
  • regExp: 搜尋是否為正規表示式。預設為“false”
  • start: 開始搜尋的起始範圍或游標位置
  • skipCurrent: 是否在搜尋中包含當前行。預設為“false”

下面是一個如何在編輯器物件上設定搜尋的示例：

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

這是執行替換的方法：

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

這是全部替換：

editor.replaceAll('bar');

editor.replaceAll使用前需要先呼叫editor.find('needle', ...)

事件監聽

onchange:

editor.getSession().on('change', callback);

selection變化:

editor.getSession().selection.on('changeSelection', callback);

cursor變化:

editor.getSession().selection.on('changeCursor', callback);

新增新的命令和繫結

將指定鍵繫結並分配給自定義功能：

editor.commands.addCommand({
    name: 'myCommand',
    bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
    exec: function(editor) {
        //...
    }
});

主要配置項

以下是目前所支援的主要選項的列表。除非另有說明，否則選項值皆為布林值，可以通過editor.setOption來設定。

- editor選項

選項名 值型別 預設值 可選值 備註
selectionStyle String text line|text 選中樣式
highlightActiveLine Boolean true - 高亮當前行
highlightSelectedWord Boolean true - 高亮選中文字
readOnly Boolean false - 是否只讀
cursorStyle String ace ace|slim|smooth|wide 游標樣式
mergeUndoDeltas String|Boolean false always 合併撤銷
behavioursEnabled Boolean true - 啟用行為
wrapBehavioursEnabled Boolean true - 啟用換行
autoScrollEditorIntoView Boolean false - 啟用滾動
copyWithEmptySelection Boolean true - 複製空格
useSoftTabs Boolean false - 使用軟標籤
navigateWithinSoftTabs Boolean false - 軟標籤跳轉
enableMultiselect Boolean false - 選中多處

- renderer選項

選項名 值型別 預設值 可選值 備註
hScrollBarAlwaysVisible Boolean false - 縱向滾動條始終可見
vScrollBarAlwaysVisible Boolean false - 橫向滾動條始終可見
highlightGutterLine Boolean true - 高亮邊線
animatedScroll Boolean false - 滾動動畫
showInvisibles Boolean false - 顯示不可見字元
showPrintMargin Boolean true - 顯示列印邊距
printMarginColumn Number 80 - 設定頁邊距
printMargin Boolean|Number false - 顯示並設定頁邊距
fadeFoldWidgets Boolean false - 淡入摺疊部件
showFoldWidgets Boolean true - 顯示摺疊部件
showLineNumbers Boolean true - 顯示行號
showGutter Boolean true - 顯示行號區域
displayIndentGuides Boolean true - 顯示參考線
fontSize Number|String inherit - 設定字號
fontFamily String inherit 設定字型
maxLines Number - - 至多行數
minLines Number - - 至少行數
scrollPastEnd Boolean|Number 0 - 滾動位置
fixedWidthGutter Boolean false - 固定行號區域寬度
theme String - - 主題引用路徑，例如"ace/theme/textmate"

- mouseHandler選項

選項名 值型別 預設值 可選值 備註
scrollSpeed Number - - 滾動速度
dragDelay Number - - 拖拽延時
dragEnabled Boolean true - 是否啟用拖動
focusTimout Number - - 聚焦超時
tooltipFollowsMouse Boolean false - 滑鼠提示

- session選項

選項名 值型別 預設值 可選值 備註
firstLineNumber Number 1 - 起始行號
overwrite Boolean - - 重做
newLineMode String auto auto|unix|windows 新開行模式
useWorker Boolean - - 使用輔助物件
useSoftTabs Boolean - - 使用軟標籤
tabSize Number - - 標籤大小
wrap Boolean - - 換行
foldStyle String - markbegin|markbeginend|manual 摺疊樣式
mode String - - 程式碼匹配模式，例如“ace/mode/text"

- 擴充套件選項

選項名 值型別 預設值 可選值 備註
enableBasicAutocompletion Boolean - - 啟用基本自動完成
enableLiveAutocompletion Boolean - - 啟用實時自動完成
enableSnippets Boolean - - 啟用程式碼段
enableEmmet Boolean - - 啟用Emmet
useElasticTabstops Boolean - - 使用彈性製表位

本文翻譯自Ace Editor官網文件

相關文章