介紹

Ace是一個(gè)用JavaScript編寫的可嵌入代碼編輯器荣瑟。它與Sublime，Vim和TextMate等本地編輯器的功能和性能相匹配劫谅。它可以輕松地嵌入任何網(wǎng)頁和JavaScript應(yīng)用程序中仙辟。

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

快速開始

簡(jiǎn)單使用

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

設(shè)置主題和語言模式

要更改主題叠国，請(qǐng)為編輯器配置要使用的主題路徑。主題文件將按需加載：

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

默認(rèn)情況下冤狡，編輯器為純文本模式悲雳。但是，所有其他語言模式都可以作為單獨(dú)的模塊使用坦胶。語言模式也將按需加載：

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

編輯器狀態(tài)

Ace將所有編輯器狀態(tài)（選擇晴楔，滾動(dòng)位置等）保留在editor.session中, 這對(duì)于制作可切換式編輯器非常有用：

var EditSession = require("ace/edit_session").EditSession
var js = new EditSession("some js code")
var css = new EditSession(["some", "css", "code here"])
// 要將文檔加載到編輯器中，只需這樣調(diào)用
editor.setSession(js)

在項(xiàng)目中配置Ace

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

// 使用setOptions方法一次設(shè)置多個(gè)選項(xiàng)
editor.setOptions({
    autoScrollEditorIntoView: true,
    copyWithEmptySelection: true,
});

// 單獨(dú)設(shè)置setOptions方法
editor.setOption("mergeUndoDeltas", "always");

// 一些選項(xiàng)也直接設(shè)置纪岁，例如：
editor.setTheme(...)

// 獲取選項(xiàng)設(shè)置值
editor.getOption("optionName");

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

設(shè)置和獲取內(nèi)容：`

editor.setValue("the new text here"); // 或 session.setValue
editor.getValue(); // 或 session.getValue

獲取選定的文本：

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

在光標(biāo)處插入：

editor.insert("Something cool");

獲取當(dāng)前光標(biāo)所在的行和列：

editor.selection.getCursor();

轉(zhuǎn)到某一行：

editor.gotoLine(lineNumber);

獲取總行數(shù)：

editor.session.getLength();

設(shè)置默認(rèn)標(biāo)簽大嗅：病：

editor.getSession().setTabSize(4);

使用軟標(biāo)簽：

editor.getSession().setUseSoftTabs(true);

設(shè)置字體大幸旁觥：

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

切換自動(dòng)換行：

editor.getSession().setUseWrapMode(true);

設(shè)置行高亮顯示：

editor.setHighlightActiveLine(false);

設(shè)置打印邊距可見性：

editor.setShowPrintMargin(false);

設(shè)置編輯器為只讀：

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

窗口自適應(yīng)

編輯器僅在resize事件觸發(fā)時(shí)時(shí)調(diào)整自身大小贡定。要想以其他方式調(diào)整編輯器div的大小可都，并且需要調(diào)整編輯器大小，請(qǐng)使用以下命令：

editor.resize()

在代碼中搜索

主要的ACE編輯器搜索功能在 search.js.中定義旋炒。以下選項(xiàng)可用于搜索參數(shù)：

• needle: 要查找的字符串或正則表達(dá)式
• backwards: 是否從當(dāng)前光標(biāo)所在的位置向后搜索签杈。默認(rèn)為“false”
• wrap: 當(dāng)搜索到達(dá)結(jié)尾時(shí)答姥，是否將搜索返回到開頭。默認(rèn)為“false
• caseSensitive: 搜索是否應(yīng)該區(qū)分大小寫尚粘。默認(rèn)為“false”
• wholeWord: 搜索是否只匹配整個(gè)單詞敲长。默認(rèn)為“false”
• range: 搜索匹配范圍秉继，要搜索整個(gè)文檔則設(shè)置為空
• regExp: 搜索是否為正則表達(dá)式尚辑。默認(rèn)為“false”
• start: 開始搜索的起始范圍或光標(biāo)位置
• skipCurrent: 是否在搜索中包含當(dāng)前行盔腔。默認(rèn)為“false”

下面是一個(gè)如何在編輯器對(duì)象上設(shè)置搜索的示例：

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

這是執(zhí)行替換的方法：

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

這是全部替換：

editor.replaceAll('bar');

editor.replaceAll使用前需要先調(diào)用editor.find('needle', ...)

事件監(jiān)聽

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) {
        //...
    }
});

主要配置項(xiàng)

以下是目前所支持的主要選項(xiàng)的列表弛随。除非另有說明撵幽，否則選項(xiàng)值皆為布爾值礁击，可以通過editor.setOption來設(shè)置。

- editor選項(xiàng)

- renderer選項(xiàng)

- mouseHandler選項(xiàng)

- session選項(xiàng)

- 擴(kuò)展選項(xiàng)