make readonly/disable tinymce textarea

Question

I need to disable or make readonly a tinymce textarea at runtime.

Solution 1

Use the configuration parameter readonly

tinyMCE.init({
        ...
        theme : "advanced",
        readonly : 1
});

Here is a link to a demo.

Update: What you can do to prevent users from editing content in your editor is to set the contenteditable attribute of the editors iframe body to false:

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);

Solution 2

From version 4.3.x on you can use code below for readonly mode

tinymce.activeEditor.setMode('readonly');

and for design mode:

tinymce.activeEditor.setMode('design'); 

Solution 3

IF you only have one editor, this works:

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);

If you have multiple editors, you have to select them by the id of the textarea:

tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', false);

Solution 4

Thariama's solution will set all TinyMCE textareas on the page to readonly.

The best solution I've found was posted by Magnar Myrtveit which will set fields to readonly that have the readonly attribute. Here is the code:

tinyMCE.init({
    ...
    setup: function(ed) {
        if ($('#'+ed.id).prop('readonly')) {
            ed.settings.readonly = true;
        }
    }
});

Solution 5

The best way I found (this is via tinymce-react, but should work with js as well), is to set the control to disabled. Using tinymce 5.2.

                <Editor 
                initialValue={details}
                disabled = {true}
                init = {{
                    height: 300,
                    menubar: false,
                    toolbar: false,
                    readonly: true
                }}/>

View more solutions