Ace Editor - prêt SEULEMENT variables

Question

J'utilise Ace Editor et je voudrais appliquer readyOnly uniquement pour les variables (JSON). Par exemple, dans ce cas, l'utilisateur ne peut pas modifier les variables « nombre » et « texte », mais il peut modifier les valeurs « 10 » et « mon texte »:

{ 
    "number": 10, 
    "text": "my text" 
    } 

J'ai essayé en utilisant ce code :

var Range = window.ace.require('ace/range').Range 
let range = new Range(1, 4, 4, 10); 
const markerId = session.addMarker(range, "readonly-highlight"); 
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(); 
    } 

Mais je ne pouvais pas sélectionner les variables à readyOnly. Quelqu'un pourrait-il m'aider ici, s'il vous plaît?

Answer 1

Implémentez une fonction appelée isValid. Cela permet de s'assurer que les touches number et text sont toujours présentes.

function isValid(code) { 
    if (Object.prototype.hasOwnProperty.call(code, 'number') && 
     Object.prototype.hasOwnProperty.call(code, 'text')) { 
     return true; 
    } 
    return false; 
} 

Mettre en œuvre une fonction appelée updateCode, qui sera déclenchée lors de la onChange de l'éditeur

function updateCode(code) { 
    if (isValid(code)) { 
     // UPDATE THE CONTENT TO EDITOR 
    } else { 
     // AN ERROR MESSAGE MAYBE :) 
    } 
} 

Depuis hasOwnProperty contrôles dans un objet JSON, assurez-vous que vous passez un JSON.parse() ed code et d'arrêter l'exécution si l'analyse JSON est un échec. La fonction suivante doit être déclenchée au cours de la onChange de l'éditeur Ace

handleOnChange(code) { 
    try { 
     var validCodeJson = JSON.parse(code); 
     // Valid Json. Validate keys and update 
     updateCode(validCodeJson); 
    } catch { 
     // Invalid Json. Some error message 
    } 
} 

Pourtant, ce n'est pas une solution complète. Vous devrez peut-être ajouter des validations supplémentaires, par exemple lorsque vous appuyez sur entrée et ainsi de suite. (J'ai utilisé l'éditeur Ace avec ReactJS et j'ai rencontré de telles erreurs).