在线编辑器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>