Ace Editor:锁定或只读代码段

问题描述

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

Using the Ace Code Editor can I lock or make readonly a segment of code but still allow other lines of code to be written or edited during a session?

推荐答案

这是解决方案的开始:

$(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/

see it working in this fiddle: http://jsfiddle.net/bzwheeler/btsxgena/

主要工作有:

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

这篇关于Ace Editor:锁定或只读代码段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！