介紹
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: 當搜索到達結尾時，是否將搜索返回到開頭。默認為“falsecaseSensitive: 搜索是否應該區分大小寫。默認為“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 | - | - | 使用彈性制表位 |
ps:------------------------------------------------------------------------------------------
首先說明：ACE 是一個實現了語法着色功能的基於 Web 的代碼編輯器，具有良好的代碼提示功能和大量的主題，所以在Web端你想擁有一個編輯器，ACE是不二選擇。
正是因為在這上面踩了一個大大的坑，而且文檔基本都是英文的，並不是說英文文檔就看不懂，但是麻煩啊，所以有必要特此說明下這玩意到底應該怎么用。
先上一個我最后的結果
是不是很棒？
好，然后接下來就是我研究的步驟了
1.下載
（需要git環境）
git clone https://github.com/ajaxorg/ace.git
沒什么好說的就是git
2.生成build版
下載后可發布build版，減輕帶寬壓力。你只需進入項目根目錄，運行一下命令（需要node環境）
npm install
node ./Makefile.dryice.js
兩條命令都執行，然后在build文件就會有了
以上兩步不懂，可以回去看看參考我之前的文章【完整安裝的過程和安裝npm模塊插件整理（圖文包括踩過的坑）】
3.引入
在html引入核心依賴文件
<script src="/build/src/ace.js" type="text/javascript"></script>
注意事項：
1.mode打頭的文件一般為開發語言支持依賴包，你只需要保留你所要編輯語言依賴包就夠了
2.theme打頭是編輯器皮膚文件，這個東西一般情況一個就夠了
3.相關依賴包的加載都是ace內部定義的require加載動態加載的，當調用了相關功能，瀏覽器會發請求加載相關依賴包，所以慎重選擇你需要剔除的依賴包。真刪了也不用着急，找到相應的包文件加回去就可以了
簡單的說就是 整個包你都給我放好
4.常用的一些api
鑒於官網好多api方法undocumented，以下列出幾個常用的方法，供大家使用：
1.初始化editor(）
ace.edit(domIdStr[string]) domIdStr: dom元素id字符串（不加#） return : editor對象 使用樣例： <style> #editor{ width:100px; height:300px; } </style> <div id="editor"></div> <script> var editor = ace.edit('editor'); </script>
2.設置主題
editor.setTheme(moduleId) moduleId: theme文件路徑 例如： editor.setTheme("ace/theme/monokai"); editor.setTheme("ace/theme/twilight");
3.設置編輯語言
editor.getSession().setMode("ace/mode/html");
4.獲取編輯內容
editor.getValue();
5.設置編輯內容
var editorValue='<body></body>'; editor.setValue(editorValue);
6.移動光標
editor.moveCursorTo(0, 0);//移動光標至第0行，第0列
7.編輯內容搜索
editor.execCommand('find');//與ctrl+f功能一致
這些一般基本夠用了，附上我的配置
ace.require("ace/ext/language_tools"); var editor = ace.edit("editor"); editor.$blockScrolling = Infinity; editor.setFontSize(16); editor.session.setMode("ace/mode/c_cpp"); editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true }); editor.setTheme("ace/theme/chrome");