JSFiddle - React, Tailwind, and code Playground

by Myles McNamara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<h2>
  How to set Ace Editor first and last line as readonly
</h2>
<p>
  This code will allow you to prevent the user from editing the first line or last line of code by setting it to readonly.  There's multiple ways to do this, but this seems to be the easiest and least amount of code to do so.
</p>
<br/>
<hr/>
<div id="editor">function foo($items) {

    $x = 'Foo no allow you edit open/close function!';

    if( $items === TRUE ){
      $x = 'Foo away!';
    }
    
    return x;
}</div>

CSS

body {
  margin: 40px;
}

#editor {
  height: 300px;
}

JavaScript

var editor = ace.edit( "editor" );

editor.setTheme("ace/theme/monokai");
// inline must be true to syntax highlight PHP without opening <?php tag
editor.getSession().setMode( { path: "ace/mode/php", inline: true } );

	// enable autocompletion and snippets
	editor.setOptions( {
		                 enableBasicAutocompletion: true,
		                 enableSnippets           : true,
		                 enableLiveAutocompletion : false
	                 } );
                   
// Prevent editing first and last line of editor
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();
  }
});