user-interface - 王牌编辑器 : Lock or Readonly Code Segment

Question

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

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();
    }
});

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

主要工作部分有:

创建开始和结束 ace anchor ，当周围的文档发生变化时，它们会跟踪“只读”部分的位置。

创建一个范围来封装 anchor

添加自定义键处理程序以检查当前即将发生的按键是否会影响只读范围，如果是，则取消它。

添加自定义粘贴/剪切处理程序以防止右键单击菜单和浏览器菜单剪切/粘贴操作