user interface - utils - Editor de Ace: Bloquear o leer solo segmento de código

ui for angular

Question

Utilizando el editor de código de Ace, ¿puedo bloquear o hacer de solo lectura un segmento de código pero permitir que otras líneas de código se escriban o editen durante una sesión?

Answer 1

Aquí está el comienzo de una solución:

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

Véalo trabajando en este violín: http://jsfiddle.net/bzwheeler/btsxgena/

Las principales piezas de trabajo son:

1. cree los anclajes de inicio y finalización que rastrean la ubicación de una parte ''solo de lectura'' a medida que el documento a su alrededor cambia.
2. Crea una gama para encapsular los anclajes.
3. agregue un manipulador de llaves personalizado para verificar si la pulsación de teclas inminente actual afectará el rango de solo lectura y cancele si es así.
4. agregue controladores personalizados de pegar / cortar para protegerse contra las acciones de cortar / pegar del menú del clic derecho y del menú del navegador

Answer 2

Puedes hacerlo fácilmente escuchando los eventos de exec :

// Prevent editing first and last line of editor
editor.commands.on("exec", function(e) {
var rowCol = editor.selection.getCursor();
if ((rowCol.row === 0) || ((rowCol.row + 1) === editor.session.getLength())) {
e.preventDefault();
e.stopPropagation();
}
});

Fuente: https://jsfiddle.net/tripflex/y0huvc1b/

Answer 3

Sugiero algo más fácil y más confiable para evitar que se modifique el rango (¡compruébelo!)

var old$tryReplace = editor.$tryReplace;
editor.$tryReplace = function(range, replacement) {
return intersects(range)?null:old$tryReplace.apply(this, arguments);
}
var session = editor.getSession();
var oldInsert = session.insert;
session.insert = function(position, text) {
return oldInsert.apply(this, [position, outsideRange(position)?text:""]);
}
var oldRemove = session.remove;
session.remove = function(range) {
return intersects(range)?false:oldRemove.apply(this, arguments);
}
var oldMoveText = session.moveText;
session.moveText = function(fromRange, toPosition, copy) {
if (intersects(fromRange) || !outsideRange(toPosition)) return fromRange;
return oldMoveText.apply(this, arguments)
}
outsideRange = function (position) {
var s0 = range.start;
if (position.row < s0.row || (position.row == s0.row && position.column <= s0.column)) return true; // position must be before range.start
var e0 = range.end;
if (position.row > e0.row || (position.row == e0.row && position.column >= e0.column)) return true; // or after range.end
return false;
}
intersects = function(withRange) {
var e = withRange.end, s0 = range.start, s = withRange.start, e0 = range.end;
if (e.row < s0.row || (e.row == s0.row && e.column <= s0.column)) return false; // withRange.end must be before range.start
if (s.row > e0.row || (s.row == e0.row && s.column >= e0.column)) return false; // or withRange.start must be after range.end
return true;
}