如何在ace編輯器中只讀一行代碼

Question

我試圖在Ace編輯器中使代碼的一部分只讀。

我已經通過使用JsFiddle

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

定的代碼我有一個問題，當我把按Backspace鍵就進入只讀部分，也沒有可編輯的部分左側嘗試。

如何讓多個代碼塊爲只讀，並避免只讀的最後一個字符被刪除。

另外，如何在文本中指定可編輯部分的標記時動態地實現整個事物？

Answer 1

檢查下面的代碼，該代碼允許多行數據塊在範圍末尾處以只讀方式輸入，以防止發生不可逆的刪除和拖放操作。

function refresheditor() { 
 
     document.getElementById("myeditor").innerHTML="<div id='editor'></div>"; document.getElementById("editor").innerHTML=document.getElementById("code").innerHTML; 
 
     var editor  = ace.edit("editor") 
 
      , session = editor.getSession() 
 
      , Range = require("ace/range").Range; 
 
      ranges = []; 
 
      
 
     var text= document.getElementById("code").innerHTML.split("\n"); 
 
     var starts=[0],ends=[]; 
 
     //// 
 
     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 intersectsRange(newRange) { 
 
     for (i=0;i<ranges.length;i++) 
 
      if(newRange.intersects(ranges[i])) 
 
      return true; 
 
     return false; 
 
     } 
 
     function preventReadonly(next, args) { 
 
      for(i=0;i<ranges.length;i++){if (intersects(ranges[i])) return;} 
 
      next(); 
 
     } 
 
     function onEnd(position){ 
 
     var row = position["row"],column=position["column"]; 
 
     for (i=0;i<ranges.length;i++) 
 
      if(ranges[i].end["row"] == row && ranges[i].end["column"]==column) 
 
      return true; 
 
     return false; 
 
     } 
 
     function outSideRange(position){ 
 
     var row = position["row"],column=position["column"]; 
 
     for (i=0;i<ranges.length;i++){ 
 
      if(ranges[i].start["row"]< row && ranges[i].end["row"]>row) 
 
       return false; 
 
      if(ranges[i].start["row"]==row && ranges[i].start["column"]<column){ 
 
       if(ranges[i].end["row"] != row || ranges[i].end["column"]>column) 
 
       return false; 
 
      } 
 
      else if(ranges[i].end["row"] == row&&ranges[i].end["column"]>column){ 
 
       return false; 
 
      } 
 
     } 
 
     return true; 
 
     } 
 
     //// 
 
     text.forEach(function(line,index){ 
 
     if((line.indexOf("&lt;editable&gt;") !== -1))ends.push(index); 
 
     if((line.indexOf("&lt;/editable&gt;") !== -1))starts.push(index+1); 
 
     }); 
 
     ends.push(text.length); 
 
     for(i=0;i<starts.length;i++){ 
 
     ranges.push(new Range(starts[i], 0,ends[i] ,0)); 
 
     } 
 
     ranges.forEach(function(range){session.addMarker(range, "readonly-highlight");}); 
 
     session.setMode("ace/mode/javascript"); 
 
     editor.keyBinding.addKeyboardHandler({ 
 
      handleKeyboard : function(data, hash, keyString, keyCode, event) { 
 
      if (Math.abs(keyCode) == 13 && onEnd(editor.getCursorPosition())){ 
 
       return false; 
 
      } 
 
      if (hash === -1 || (keyCode <= 40 && keyCode >= 37)) return false; 
 
      for(i=0;i<ranges.length;i++){ 
 
       if (intersects(ranges[i])) { 
 
        return {command:"null", passEvent:false}; 
 
       } 
 
      } 
 
      } 
 
     }); 
 
     before(editor, 'onPaste', preventReadonly); 
 
     before(editor, 'onCut', preventReadonly); 
 
     for(i=0;i<ranges.length;i++){ 
 
     ranges[i].start = session.doc.createAnchor(ranges[i].start); 
 
     ranges[i].end = session.doc.createAnchor(ranges[i].end); 
 
     ranges[i].end.$insertRight = true; 
 
     } 
 

 
     var old$tryReplace = editor.$tryReplace; 
 
     editor.$tryReplace = function(range, replacement) { 
 
      return intersectsRange(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 intersectsRange(range)?false:oldRemove.apply(this, arguments);       
 
     } 
 
     var oldMoveText = session.moveText; 
 
     session.moveText = function(fromRange, toPosition, copy) { 
 
      if (intersectsRange(fromRange) || !outSideRange(toPosition)) return fromRange; 
 
      return oldMoveText.apply(this, arguments); 
 
     } 
 

 
} 
 
refresheditor();

.ace_editor { 
 
    width:100%; 
 
    height:300px; 
 
} 
 
.readonly-highlight{ 
 
    background-color: red; 
 
    opacity: 0.2; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ace.c9.io/build/src/ace.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://jsfiddle.net/css/normalize.css"> 
 
<link rel="stylesheet" type="text/css" href="http://jsfiddle.net/css/result-light.css"> 
 
    <div id="myeditor" ></div> 
 
    <div id="code" style="display:none;">//&lt;editable&gt; 
 
//&lt;/editable&gt; 
 
function refresheditor() { 
 
    //&lt;editable&gt; 
 
    document.getElementById("myeditor").innerHTML="&lt;div id='editor'&gt;&lt;/div&gt;"; 
 
    document.getElementById("editor").innerHTML=document.getElementById("code").innerHTML; 
 
    //&lt;/editable&gt; 
 
    var editor  = ace.edit("editor") 
 
     , session = editor.getSession() 
 
     , Range = require("ace/range").Range; 
 
     ranges = []; 
 
     var text= document.getElementById("code").innerHTML.split("\n"); 
 
     var starts=[0],ends=[]; 
 
     text.forEach(function(line,index){ 
 
      if((line.indexOf("&amp;lt;editable&amp;gt;") !== -1))ends.push(index); 
 
      if((line.indexOf("&amp;lt;/editable&amp;gt;") !== -1))starts.push(index+1); 
 
     }); 
 
     ends.push(text.length); 
 
     for(i=0;i&lt;starts.length;i++){ 
 
      ranges.push(new Range(starts[i], 0,ends[i] ,0)); 
 
     } 
 
     ranges.forEach(function(range){session.addMarker(range, "readonly-highlight");}); 
 
    session.setMode("ace/mode/javascript"); 
 
    //&lt;editable&gt; 
 
    editor.keyBinding.addKeyboardHandler({ 
 
     handleKeyboard : function(data, hash, keyString, keyCode, event) { 
 
      var pos=editor.getCursorPosition(); 
 
      if (Math.abs(keyCode) == 13){ 
 
\t \t for (i=0;i&lt;ranges.length;i++){ 
 
\t \t \t if((ranges[i].end["row"]==pos["row"])&&(ranges[i].end["column"]==pos["column"])){ return false;} 
 
\t \t } 
 
\t  } 
 
      if (hash === -1 || (keyCode &lt;= 40 && keyCode &gt;= 37)) return false; 
 
      for(i=0;i&lt;ranges.length;i++){ 
 
       if (intersects(ranges[i])) { 
 
        return {command:"null", passEvent:false}; 
 
       } 
 
      } 
 
     } 
 
    }); 
 
    //&lt;/editable&gt; 
 
    before(editor, 'onPaste', preventReadonly); 
 
    before(editor, 'onCut', preventReadonly); 
 
    for(i=0;i&lt;ranges.length;i++){ 
 
     ranges[i].start = session.doc.createAnchor(ranges[i].start); 
 
     ranges[i].end = session.doc.createAnchor(ranges[i].end); 
 
     ranges[i].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) { 
 
     for(i=0;i&lt;ranges.length;i++){if (intersects(ranges[i])) return;} 
 
     next(); 
 
    } 
 
} 
 
refresheditor(); 
 

 
     
 
</div> 
 
<button onclick="refresheditor()">Reload</button>

Answer 2

遺憾：這個代碼不處理拖/放 我上週加最後一個建議：Ace Editor: Lock or Readonly Code Segment

Answer 3

該代碼段會阻止用戶編輯第一個或最後一個編者按：

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

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

來源： https://groups.google.com/forum/#!topic/ace-discuss/yffGsSG7GSA