make readonly/disable tinymce textarea

Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

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 - Javascript

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 - Javascript

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 - Javascript

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 - Javascript

To disable you can call this command:

tinymce.EditorManager.execCommand('mceToggleEditor', true, tinymceId);

And to again enable the editor you can again call this command.

'mceToggleEditor' command toggles the WYSIWYG mode on or off by displaying or hiding the textarea and editor instance. This is not the same thing as mceAddControl or mceRemoveControl because the instance is still there and uninitialized, so this method is faster.

Link for above command: http://archive.tinymce.com/wiki.php/TinyMCE3x:Command_identifiers

Solution 6 - Javascript

For the latest 5.x version, use

editor.mode.set('readonly')

and

editor.mode.set('design')

Solution 7 - Javascript

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
                }}/>

Solution 8 - Javascript

You can see this answer here by @rioted: https://stackoverflow.com/a/34764607/1827960.

I used it to come up with this solution:

tinymce.settings = $.extend(tinymce.settings, { readonly: 1 });
tinymce.EditorManager.editors.forEach(function (editor) {
	tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
	//tinymce.EditorManager.editors = [];
	tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
});

Solution 9 - Javascript

you can use

this.getBody().setAttribute('contenteditable', false);

take look at full solution,, my server side is Asp.net MVC

 setup: function (ed) {
        ed.on('init', function () {
            this.execCommand("fontSize", false, "17px");
            $("html,body").scrollTop(0);
            @if (ViewBag.desableEdit != null && ViewBag.desableEdit == true)
            {
                <text>
                    this.getBody().setAttribute('contenteditable', false);
                </text>
            }

        });

anather way to do it if you have server side condition which will be removed in the returned HTML

 tinymce.init({
    selector: ... ,
    ....
    @if (ViewBag.desableEditExseptExportNumber != null && ViewBag.desableEditExseptExportNumber == true)
    {
         <text>
              readonly: 1,
         </text>
    }
    language: 'ar',
    ....});

Solution 10 - Javascript

getInit(): any
{
	const result = {
		base_url: baseUrl,
		menubar: false,
		branding: false,
		height: '500',
		selector: 'textarea',  // change this value according to your HTML
		toolbar: false,
		statusbar: false,
		readonly: true,
		setup: function(ed)
		{
			ed.settings.readonly = true;
		}
	};
	return result;
}

Solution 11 - Javascript

Maybe this code line helps in others browsers using iframes.

tinymce.activeEditor.getBody().contenteditable = false

Regards!

Solution 12 - Javascript

That works for ASP.NET MVC Razor

readonly: @(Model.Readonly ? "true" : "false")

while initializing tinyMCE:

tinymce.init({/* put readonly setting here */});

Solution 13 - Javascript

disabled={true} React integrations

Content Type	Original Author	Original Content on Stackoverflow
Question	Ahmed-Anas	View Question on Stackoverflow
Solution 1 - Javascript	Thariama	View Answer on Stackoverflow
Solution 2 - Javascript	grajsek	View Answer on Stackoverflow
Solution 3 - Javascript	Makiavelo	View Answer on Stackoverflow
Solution 4 - Javascript	josephdpurcell	View Answer on Stackoverflow
Solution 5 - Javascript	Gaurav	View Answer on Stackoverflow
Solution 6 - Javascript	Dakusan	View Answer on Stackoverflow
Solution 7 - Javascript	Sat Thiru	View Answer on Stackoverflow
Solution 8 - Javascript	Blair Connolly	View Answer on Stackoverflow
Solution 9 - Javascript	Basheer AL-MOMANI	View Answer on Stackoverflow
Solution 10 - Javascript	Tawani Anyangwe	View Answer on Stackoverflow
Solution 11 - Javascript	antoniosanct	View Answer on Stackoverflow
Solution 12 - Javascript	adam.bielasty	View Answer on Stackoverflow
Solution 13 - Javascript	SaimumIslam27	View Answer on Stackoverflow