最好用的web端代碼文本編輯器ACE

NO IMAGE

使用足夠簡單,功能足夠強大,體驗足夠優秀

之前有一個系列文章介紹我在運維繫統開發過程中用到的那些順手的前端插件,總共發了四篇文章介紹了三個非常棒的插件,分別是bootstrap-duallistboxselect2datatables,今天再更此係列,讓好東西讓更多的人知道,受益!

本次介紹ace.js,這是一個用JavaScript編寫的獨立代碼編輯器。支持超過120種語言的語法高亮,超過20個不同風格的主題,同時還支持實時語法檢查,自定義快捷鍵綁定,代碼摺疊,搜索替換,自動縮進等等功能

項目地址為:ace.c9.io

我主要用它來替換表單中的textarea標籤,以及實現在網頁上修改文件的展示,例如之前配置中心Kerrigan文章中講到的web端修改配置文件就用了ace

最好用的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目錄下即可,編譯好的倉庫地址是:github.com/ajaxorg/ace…

推薦同時引入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進行查詢

最好用的web端代碼文本編輯器ACE

通過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的不足,簡單好用且足夠強大


最好用的web端代碼文本編輯器ACE

相關文章推薦閱讀:

相關文章

GithubPages訪問太慢?通過Netlify免費加速

關於編碼你必須知道的知識和技巧

神器推薦|辦公室久坐的你不可錯過的神器

源碼給你,零基礎搭建一個免費的網址導航站