程式碼風格美化編輯器

更多精彩

• 更多技術部落格，請移步 asing1elife’s blog

官網

Ace - The High Performance Code Editor for the Web

API

1. 設定主題 editor.setTheme("ace/theme/twilight");
2. 設定程式設計師語言模式 editor.getSession().setMode("ace/mode/javascript");
3. 設定製表符大小 editor.getSession().setTabSize(4);
4. 設定軟標籤 editor.getSession().setUseSoftTabs(true);
5. 設定程式碼自動換行 editor.getSession().setUseWrapMode(true);
6. 設定當前行高亮 editor.setHighlightActiveLine(false);
7. 設定邊距線顯示 editor.setShowPrintMargin(false);
8. 設定只讀 editor.setReadOnly(true);
9. 重新設定編輯器尺寸 editor.resize();

方法

1. 賦值 editor.setValue("the new text here");
2. 取值 editor.getValue();
3. 獲取選擇內容 editor.session.getTextRange(editor.getSelectionRange());
4. 在游標處插入 editor.insert("Something cool");
5. 獲取游標所在行或列 editor.selection.getCursor();
6. 跳轉到指定行 editor.gotoLine(10);
7. 獲取總行數 editor.session.getLength();

事件

1. 監聽內容改變

editor.getSession().on("change", function(e) {

});

2. 監聽內容選擇

editor.getSession().selection.on("changeSelection"
 
, function(e) {

});

3. 監聽游標移動

editor.getSession().selection.on("changeCursor", function(e) {
	
});