Ace editor中文文檔

• 2020 年 10 月 27 日
• 筆記
• CSS, Editor, HTML, javascript, 前端

介紹

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選項

– renderer選項

– mouseHandler選項

– session選項

– 擴展選項