Set Ace Editor to Read Only

Issue

I am having trouble setting my ace-editor to read only mode. I am using angular 9 and have tried the following approach:

In the HTML file I have:

 <ace-editor mode="java" theme="monokai" id="codeEditor"></ace-editor>

In my typescript file, I have:

import * as ace from 'ace-builds/src-noconflict/ace';

... 

ngOnInit() {
    var editor = ace.edit('codeEditor');
    editor.getSession().setUseWorker(false);
    editor.setShowPrintMargin(false);
    editor.setReadOnly(true);
}

However, when the template loads, I am still able to write code in my ace editor.

Solution

Check if there is an error before setReadOnly code, or if some of your code changes readOnly back to false, because the code from your example works in the example below

<script src=https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js></script>
<div id=codeEditor style=height:80vh></div>
<script>
    var editor = ace.edit('codeEditor');
    editor.session.setUseWorker(false);
    editor.setShowPrintMargin(false);
    editor.setReadOnly(true);
</script>

Answered By - a user