Ace editor中文文檔

介紹

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	-	-	使用彈性製表位