Search code examples
ace-editor

Make only last line editable in ace editor

Ace editor read only region required

Solution

  • you can use the exec event on editor.commands to disable non readonly commands if wrong lines are selected 

    body,html {
    height: 90%
}
    <script src=https://ajaxorg.github.io/ace-builds/src/ace.js></script>
<script>
editor = ace.edit(document.body)
editor.setOptions({
  mode: "ace/mode/javascript"
});
editor.commands.on("exec", function(e) {
    if (e.command.readOnly)
        return;
    var editableRow = editor.session.getLength() - 1;
    var deletesLeft = e.command.name == "backspace" || e.command.name == "removewordleft";
    debugger
    var notEditable = editor.selection.getAllRanges().some(function(r) {
        if (deletesLeft && r.start.column == 0 && r.end.column == 0) return true;
        return r.start.row != editableRow || r.end.row != editableRow;
    });
    if (notEditable)
        e.preventDefault();
});
</script>