Ace编辑器:锁定或只读代码段

Question

使用Ace代码编辑器,我可以锁定或只读一段代码,但仍允许在会话期间编写或编辑其他代码行吗？

Answer 1

这是解决方案的开始:

$(function() {
    var editor     = ace.edit("editor1")
        , session  = editor.getSession()
        , Range    = require("ace/range").Range
        , range    = new Range(1, 4, 1, 10)
        , markerId = session.addMarker(range, "readonly-highlight");

    session.setMode("ace/mode/javascript");
    editor.keyBinding.addKeyboardHandler({
        handleKeyboard : function(data, hash, keyString, keyCode, event) {
            if (hash === -1 || (keyCode <= 40 && keyCode >= 37)) return false;

            if (intersects(range)) {
                return {command:"null", passEvent:false};
            }
        }
    });

    before(editor, 'onPaste', preventReadonly);
    before(editor, 'onCut',   preventReadonly);

    range.start  = session.doc.createAnchor(range.start);
    range.end    = session.doc.createAnchor(range.end);
    range.end.$insertRight = true;

    function before(obj, method, wrapper) {
        var orig = obj[method];
        obj[method] = function() {
            var args = Array.prototype.slice.call(arguments);
            return wrapper.call(this, function(){
                return orig.apply(obj, args);
            }, args);
        }

        return obj[method];
    }

    function intersects(range) {
        return editor.getSelectionRange().intersects(range);
    }

    function preventReadonly(next, args) {
        if (intersects(range)) return;
        next();
    }
});

看到它在这个小提琴中工作:http://jsfiddle.net/bzwheeler/btsxgena/

主要工作是:

1. 创建开始和结束ace锚点,当它周围的文档发生变化时,它会跟踪"只读"部分的位置.
2. 创建一个封装锚点的范围
3. 添加自定义密钥处理程序以检查当前即将发生的按键是否会影响只读范围,如果是,则取消它.
4. 添加自定义粘贴/剪切处理程序以防止右键单击菜单和浏览器菜单剪切/粘贴操作