make readonly/disable tinymce textarea

Question

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

Eirene

Answer 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);

Oswell

thanks,but I need to do this at runtime, not during initilization – Eirene

in this case have a look at the following SO question: #8946891 – Oswell

Answer 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'); 

Edit: From version 6 on you can use code below for readonly mode

tinymce.activeEditor.mode.set('readonly');

and for design mode:

tinymce.activeEditor.mode.set('design'); 

Socher

This also appears to be the only working solution in 4.3.x as other suggestions simply do not work. – Pajamas

Problem is that it doesn't only disable editing but all plugins as well, including Preview and see the source code – Peppermint

This was the only solution that worked for me. It's also the cleanest solution presented. – Melliemelliferous

Great! You can also use tinyMCE.get('editor_ID').setMode('readonly'); – Nanete

this code is usable in case we have only 1 tinyemc field on the page. I m having 2 Textarea it works for only 1 text area and another one is editable – Pauli

@Pauli check the comment above yours – Socher

@Socher I can explain what I meant – Pauli

Answer 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);

Multidisciplinary

Despite of the textarea gets disabled, it still can be modified with the toolbar, or bt selecting all the content whit double click – Cabbageworm

Answer 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;
        }
    }
});

Upthrust

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

Joella

Yeah, the React version is a little different. The docs mention readonly getting overridden: tiny.cloud/docs/integrations/react/#init – Brillatsavarin

Answer 6

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

Elliellicott

Answer 7

For the latest 5.x version, use

editor.mode.set('readonly')

and

editor.mode.set('design')

Bianchi

Answer 8

You can see this answer here by @rioted: https://mcmap.net/q/330799/-how-do-i-remove-tinymce-and-then-re-add-it.

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);
});

Carrie

Answer 9

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',
    ....});

Lively

Answer 10

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

Accelerant

When you post an answer for a 8-year old question, please explain it in a few words and describe why it's different from the others. – Sulfate

Answer 11

For the newest version of tinymce (6.x), I found the .getbody() and .setMode() is no longer correct. Use:

tinymce.get("xxx").mode.set("readonly | design");

or

tinymce.activeEditor.mode.set("readonly | design");

Instead

Alejoa

Answer 12

Maybe this code line helps in others browsers using iframes.

tinymce.activeEditor.getBody().contenteditable = false

Regards!

Nous

Answer 13

That works for ASP.NET MVC Razor

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

while initializing tinyMCE:

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

Perch

Answer 14

For v7, change this:

tinyMCE.get(...).setMode("readonly")

to this:

tinyMCE.get(...).mode.set("readonly")

Gaw