轉自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html
ACE 是一個開源的、獨立的、基於瀏覽器的代碼編輯器,可以嵌入到任何web頁面或JavaScript應用程序中。ACE支持超過60種語言語法高亮,並能夠處理代碼多達400萬行的大型文檔。ACE開發團隊稱,ACE在性能和功能上可以媲美本地代碼編輯器(如Sublime Text、TextMate和Vim等)。
ACE是Mozilla Skywriter(以前稱為Bespin)項目的繼任者,並作為Cloud9的主要在線編輯器。
以下是它的詳細特性:
- 可以對60多種語言進行語法着色(可以導入TextMate/Sublime/.tmlanguage 文件)
- 20多種主題(可以導入TextMate/Sublime/.tmtheme文件)
- 自動縮進,減少縮進
- 一個可選的命令行
- 處理巨大的文件,可以處理4,000,000行代碼
- 完全自定義的鍵綁定,包括V正則表達式搜索和替換
- 高亮匹配括號
- 軟標簽和真正的標簽之間切換
- 顯示隱藏的字符
- 用鼠標拖放文本
- 換行
- 代碼折疊
- 多個光標和選擇
- 實時語法檢查器(支持 JavaScript/CoffeeScript/CSS/XQuery)
- 剪切,復制和粘貼功能IM和Emacs模式
項目地址:
- git clone git://github.com/ajaxorg/ace.git
相關項目:
使用引導:
1、引入
- var ace = require("lib/ace");
2、設置主題
- editor.setTheme("ace/theme/twilight");
3、設置程序語言模式
- editor.getSession().setMode("ace/mode/javascript");
4、一般常用操作
設置、獲取內容:
- editor.setValue("the new text here"); // or session.setValue
- editor.getValue(); // or 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);
設置字體大小,這個其實不算API:
- document.getElementById('editor').style.fontSize='12px';
設置代碼折疊:
- editor.getSession().setUseWrapMode(true);
設置高亮:
- editor.setHighlightActiveLine(false);
設置打印邊距可見度:
- editor.setShowPrintMargin(false);
設置編輯器只讀:
- editor.setReadOnly(true); // false to make it editable
5、觸發尺寸縮放
編輯器默認自適應大小,如果要程序控制resize,使用如下方法:
- editor.resize();
6、搜索
- editor.find('needle',{
- backwards: false,
- wrap: false,
- caseSensitive: false,
- wholeWord: false,
- regExp: false
- });
- editor.findNext();
- editor.findPrevious();
下列選項可用於您的搜索參數:
needle: 要查找的字符串或正則表達式
backwards: 是否反向搜索,默認為false
wrap: 搜索到文檔底部是否回到頂端,默認為false
caseSensitive: 是否匹配大小寫搜索,默認為false
wholeWord: 是否匹配整個單詞搜素,默認為false
range: 搜索范圍,要搜素整個文檔則設置為空
regExp: 搜索內容是否是正則表達式,默認為false
start: 搜索起始位置
skipCurrent: 是否不搜索當前行,默認為false
替換單個字符:
- editor.find('foo');
- editor.replace('bar');
替換多個字符:
- editor.replaceAll('bar');
editor.replaceAll使用前需要先調用editor.find('needle', ...)
7、事件監聽
監聽改變事件:
- editor.getSession().on('change', function(e) {
- // e.type, etc
- });
監聽選擇事件:
- editor.getSession().selection.on('changeSelection', function(e) {
- });
監聽光標移動:
- editor.getSession().selection.on('changeCursor', function(e) {
- });
8、添加新命令、綁定按鍵
要指定鍵綁定到一個自定義函數:
- editor.commands.addCommand({
- name: 'myCommand',
- bindKey: {win: 'Ctrl-M', mac: 'Command-M'},
- exec: function(editor) {
- //...
- },
- readOnly: true // 如果不需要使用只讀模式,這里設置false
- });
詳細API:http://ace.c9.io/#nav=api