how to make html editor to be disable or read only

Question

I am getting html editor on my web page but I want it as un editable. how to do that?

<text area name="content" id="editor"></text area>
<script src="https://htmeditor.com/js/htmeditor.min.js" htmeditor_textarea="editor">

This is the code which I tried and I did got perfect html editor but I want it to be only editable on button before it should be disabled or read only(un editable).

Answer 1

If you can change css classes into your html elements this solution can be your way to go:

You can add a wrapper div to your text area and script:

    <div id="parent-container" class="handle-no-events">
       <textarea name="content" id="editor"></textarea>
       <script src="https://htmeditor.com/js/htmeditor.min.js" htmeditor_textarea="editor"></script>
    </div>

The example class "handle-no-event" when applied will prevent any edit on parent-container child elements, you can toggle or apply it again to enable/disable inputs on your editor.

Here what's inside handle-no-events class

   .handle-no-events {
       pointer-events: none;
   }

This method WILL NOT trigger the "disabled" state on input elements, so if you need to rely to this state in your editor elements the method provided is not viable