2017-08-04 141 views
0

我正在使用王牌編輯器,我想僅適用於變量(JSON)的readyOnly。王牌編輯器 - 只准備變量

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

我嘗試使用此代碼: 例如,在這種情況下,用戶無法編輯變量「數量」和「文字」,但他可以編輯值「10」和「我的文字」 :

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

但我無法選擇變量readyOnly。 請問有人可以幫我嗎?

回答

0

實現一個名爲isValid的函數。這是爲了確保密鑰numbertext始終存在。

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

實現一個叫updateCode功能,這將編輯

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

由於JSON對象hasOwnProperty檢查的onChange期間被觸發,確保你傳遞一個JSON.parse()code和停止執行如果JSON解析失敗。下面的函數應的王牌編輯器的onChange期間

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

仍然被觸發,它不是一個完整的解決方案。您可能需要添加其他驗證,例如按下回車等。 (我使用過ReactJS的Ace編輯器,並且遇到過這樣的錯誤)。