在線編輯器ACE Editor的使用

ACE 是一個開源的、獨立的、基於瀏覽器的代碼編輯器，能夠嵌入到任何web頁面或JavaScript應用程序中。ACE支持超過60種語言語法高亮，並可以處理代碼多達400萬行的大型文檔。ACE開發團隊稱，ACE在性能和功能上能夠媲美本地代碼編輯器（如Sublime Text、TextMate和Vim等）。

ACE是Mozilla Skywriter（之前稱爲Bespin）項目的繼任者，並做爲Cloud9的主要在線編輯器。

1、特性

• 能夠對60多種語言進行語法着色(能夠導入TextMate/Sublime/.tmlanguage 文件)
• 20多種主題(能夠導入TextMate/Sublime/.tmtheme文件)
• 自動縮進，減小縮進
• 一個可選的命令行
• 處理巨大的文件,能夠處理4,000,000行代碼
• 徹底自定義的鍵綁定，包括V正則表達式搜索和替換
• 高亮匹配括號
• 軟標籤和真正的標籤之間切換
• 顯示隱藏的字符
• 用鼠標拖放文本
• 換行
• 代碼摺疊
• 多個光標和選擇
• 實時語法檢查器(支持 JavaScript/CoffeeScript/CSS/XQuery)
• 剪切，複製和粘貼功能IM和Emacs模式

2、使用

一、引入 ace

1. var ace = require("lib/ace");

二、設置主題

1. editor.setTheme("ace/theme/twilight");

三、設置程序語言模式

1. editor.getSession().setMode("ace/mode/javascript");

四、通常經常使用操做
設置、獲取內容:

1. editor.setValue("the new text here"); // or session.setValue
2. editor.getValue(); // or session.getValue

獲取選擇內容:

1. editor.session.getTextRange(editor.getSelectionRange());

在光標處插入:

1. editor.insert("Something cool");

獲取光標所在行或列:

1. editor.selection.getCursor();

跳轉到行:

1. editor.gotoLine(lineNumber);

獲取總行數:

1. editor.session.getLength();

設置默認製表符的大小:

1. editor.getSession().setTabSize(4);

使用軟標籤:

1. editor.getSession().setUseSoftTabs(true);

設置字體大小，這個其實不算API:

1. document.getElementById('editor').style.fontSize='12px';

設置代碼摺疊:

1. editor.getSession().setUseWrapMode(true);

設置高亮:

1. editor.setHighlightActiveLine(false);

設置打印邊距可見度:

1. editor.setShowPrintMargin(false);

設置編輯器只讀:

1. editor.setReadOnly(true); // false to make it editable

五、觸發尺寸縮放
編輯器默認自適應大小，若是要程序控制resize，使用以下方法:

1. editor.resize();

六、搜索

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
替換單個字符:

1. editor.find('foo');
2. editor.replace('bar');

替換多個字符:

1. editor.replaceAll('bar');

editor.replaceAll使用前須要先調用editor.find('needle', ...)
七、事件監聽
監聽改變事件:

editor.getSession().on('change', function(e) {
    // e.type, etc
});

 

監聽選擇事件:

editor.getSession().selection.on('changeSelection', function(e) {
});

 

監聽光標移動:

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

 

八、添加新命令、綁定按鍵
要指定鍵綁定到一個自定義函數:

editor.commands.addCommand({
    name: 'myCommand',
    bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
    exec: function(editor) {
        //...
    },
    readOnly: true // 若是不須要使用只讀模式，這裏設置false
});

 

 

3、禁止複製代碼

<script type="text/javascript">
    editor.setReadOnly(true);
    editor.commands.addCommand({
        name: 'myCommand',
        bindKey: {win: 'Ctrl-C',  mac: 'Command-C'},
        exec: function(editor) {
            layer.alert('禁止複製',{title:'提示'})
            console.log(editor)

        },
        readOnly: true // 若是不須要使用只讀模式，這裏設置false
    });
    if (window.Event)
        document.captureEvents(Event.MOUSEUP);
    function nocontextmenu(){
        event.cancelBubble = true
        event.returnValue = false;
        return false;
    }
    function norightclick(e){
        if (window.Event){
            if (e.which == 2 || e.which == 3)
                return false;
        }
        else
        if (event.button == 2 || event.button == 3){
            event.cancelBubble = true
            event.returnValue = false;
            return false;
        }
    }
    document.oncontextmenu = nocontextmenu; // for IE5+
    document.onmousedown = norightclick; // for all others
</script>