javascript - How to make multiple chunk of lines readonly in ace editor -
i tried make parts of code read-only in ace editor.
i have tried using code given in 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(); } }); i got problem when keep pressing backspace went read-only part , there no editable part left.
how can make multiple chunks of code read-only , avoid last character read-only getting deleted.
also, how achieve whole thing dynamically have markers in text specifying editable portions ?
check below code allows multiple chunk of lines read-only enter @ end of range prevent non reversible delete , drag/drop handled.
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) { (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"]; (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"]; (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("<editable>") !== -1))ends.push(index); if((line.indexof("</editable>") !== -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;">//<editable> //</editable> function refresheditor() { //<editable> document.getelementbyid("myeditor").innerhtml="<div id='editor'></div>"; document.getelementbyid("editor").innerhtml=document.getelementbyid("code").innerhtml; //</editable> 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("&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"); //<editable> editor.keybinding.addkeyboardhandler({ handlekeyboard : function(data, hash, keystring, keycode, event) { var pos=editor.getcursorposition(); if (math.abs(keycode) == 13){ (i=0;i<ranges.length;i++){ if((ranges[i].end["row"]==pos["row"])&&(ranges[i].end["column"]==pos["column"])){ 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}; } } } }); //</editable> 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; } 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<ranges.length;i++){if (intersects(ranges[i])) return;} next(); } } refresheditor(); </div> <button onclick="refresheditor()">reload</button>
Comments
Post a Comment