validate utils for bootstrap user-interface editor ace-editor readonly-attribute

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



ui for angular (3)

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?


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

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/


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