最好用的web端程式碼文字編輯器ACE
使用足夠簡單，功能足夠強大，體驗足夠優秀
之前有一個系列文章介紹我在運維繫統開發過程中用到的那些順手的前端外掛，總共發了四篇文章介紹了三個非常棒的外掛，分別是bootstrap-duallistbox、select2和datatables，今天再更此係列，讓好東西讓更多的人知道，受益！
本次介紹ace.js，這是一個用JavaScript編寫的獨立程式碼編輯器。支援超過120種語言的語法高亮，超過20個不同風格的主題，同時還支援實時語法檢查，自定義快捷鍵繫結，程式碼摺疊，搜尋替換，自動縮排等等功能
專案地址為：https://ace.c9.io
我主要用它來替換表單中的textarea標籤，以及實現在網頁上修改檔案的展示，例如之前配置中心Kerrigan文章中講到的web端修改配置檔案就用了ace
基本使用
這個專案引入非常簡單，只需要引入一個ace.js檔案即可，然後例項化即可
// 引入js檔案
<script src="/static/js/ace.js"></script>
<pre id="content" style="height:620px"></pre>
// 例項化編輯器
var editor = ace.edit("content");github上除了原始碼檔案外，ace還貼心的準備了編譯好的專案檔案，以方便使用者使用，我們只需要將編譯好的檔案目錄copy到我們專案的js目錄下即可，編譯好的倉庫地址是：https://github.com/ajaxorg/ace-builds
推薦同時引入ext-searchbox.js檔案，這樣可以在編輯器中直接使用ctrl+F快捷鍵進行搜尋
基本配置
ace有許多的配置項可供選擇，通過這些配置項可以打造自己的個性編輯器
你可以通過setTheme來設定主題，需要注意的是主題檔案要存在，並且需要與ace.js同級，命名規則為theme-主題名.js
editor.setTheme("ace/theme/twilight")預設情況下編輯器為純文字模式，你可以通過setMode來設定編輯器對應的語言模式，例如你想讓其匹配markdown，就可以像下邊這樣配置，同樣需要語言模式的檔案存在，檔案與ace.js同級，命名規則為mode-語言模式.js
editor.session.setMode("ace/mode/markdown")通過setFontSize可以設定編輯器內文字字型的大小
editor.setFontSize(14);通過setTabSize可以設定製表符的長度
editor.getSession().setTabSize(4);同時可以通過setUseSoftTabs將製表符變成對應長度的空格
editor.session.setUseSoftTabs(true);如果你不想編輯，可以通過setReadOnly可以將編輯器設定為只讀模式
editor.setReadOnly(true)預設情況下ace編輯器中會有一道豎線標識列印的邊距，可以通過setShowPrintMargin來控制其是否顯示
editor.setShowPrintMargin(false);編輯器操作
ace可以方便的對編輯器內的資料進行獲取和寫入，甚至可以只獲取選中的內容，同時也能實現獲取行數，跳轉到行等操作
通過getValue可以獲取到編輯器中的全部資料
editor.getSession().getValue()如果編輯器內有部分資料被選中，則可以通過getSelectionRange來獲取選中的部分內容
editor.session.getTextRange(editor.getSelectionRange())這在特性我實現SQL查詢的功能中有用到，如果查詢框內有多條SQL，可以選擇其中一條SQL進行查詢
通過setValue可以給編輯器初始化資料
editor.getSession().setValue("ops-coffee.cn")當你想往編輯器插入資料時，可以通過insert在游標處插入資料
editor.insert('ops-coffee.cn')通過getLength可以獲取到編輯器內資料的總行數
editor.session.getLength()goLine則可以跳轉到指定的行
editor.gotoLine(37)通過getCursor可以獲取到編輯器內游標的位置，輸出結果為一個標識行和列的字典，像這樣：{row:13,column:37}
editor.selection.getCursor()搜尋與替換
ace還實現了強大的搜尋和替換功能，可以單個替換也可以全部替換
通過find可以進行搜尋
editor.find('ops-coffee', {
backwards: false,
wrap: false,
caseSensitive: false,
wholeWord: false,
regExp: false
}); find後邊跟了兩個引數， 第一個為要搜尋的內容，第二個為搜尋配置的字典， 字典內可以配置如下一些引數
- backwards: 是否反向搜尋，預設為false
- wrap: 搜尋到文件底部是否回到頂端，預設為false
- caseSensitive: 是否匹配大小寫搜尋，預設為false
- wholeWord: 是否匹配整個單詞搜素，預設為false
- range: 搜尋範圍，要搜素整個文件則設定為空
- regExp: 搜尋內容是否是正則表示式，預設為false
- start: 搜尋起始位置
- skipCurrent: 是否不搜尋當前行，預設為false
通過findAll可以高亮顯示全部搜尋到的內容
editor.findAll();findNext則可以查詢下一個搜尋到的內容
editor.findNext(); findPrevious查詢上一個匹配的內容
editor.findPrevious(); 通過replace可以對當前find查詢到的字串進行替換
editor.replace('ops-coffee.cn'); 而通過replaceAll則可以對find查詢到的所有內容替換
editor.replaceAll('ops-coffee.cn');需要注意的是，無論是replace還是replaceAll都需要配合find一起使用
監聽變化
ace另一個強大的地方是實現了對編輯器的監聽，除了可以監聽內容的變化外，還能監聽選中內容的變化，甚至是游標的變化
通過change可以監聽到編輯器內容的變化
editor.getSession().on('change', function(e) {
console.log('內容有變化')
});changeSelection則可以監聽到選擇內容的變化
editor.getSession().selection.on('changeSelection', function(e) {
console.log('選擇內容有變化')
});連游標的變化都可以通過changeCursor監聽到
editor.getSession().selection.on('changeCursor', function(e) {
console.log('監聽游標的變化')
});替換textarea
html中的textarea比較雞肋，連最基本的換行都無法實現，所以我通常都會用ace來代替form表單中的textarea，但預設情況下submit無法自動獲取pre標籤的資料做提交，這該如何處理呢？
一種簡單的方式就是將textarea隱藏，同時建立一個ace編輯器來取代他，然後檢測編輯器內資料的變化自動給填充到textarea內，完整的例子就像下邊這樣
<form class="form-horizontal" id="modalForm_Content" method="post" action="">{% csrf_token %}
<div class="form-group">
<label class="col-md-2 control-label"> 內容</label>
<div class="col-md-9">
<textarea class="form-control" id="form_content" name="content" rows="20"></textarea>
<pre id="content" style="height:415px"></pre>
</div>
</div>
</form>
// 載入ace editor
var editor = ace.edit("content");
var textarea = $('textarea[name="content"]').hide();
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
});非常完美的彌補了textarea的不足，簡單好用且足夠強大
相關文章推薦閱讀：
- 沒有基礎也能寫個小程式
- 利用Django徒手寫個靜態頁面生成工具