make readonly/disable tinymce textarea

Question

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

Thariama · Accepted Answer · 2012-12-17T08:42:30.487

68

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

edited Dec 17 '12 at 08:42

answered Dec 14 '12 at 15:43

Thariama

50,002
13
138
166

2

thanks,but I need to do this at runtime, not during initilization – Ahmed-Anas Dec 14 '12 at 15:45
3

in this case have a look at the following SO question: http://stackoverflow.com/questions/8946391/set-tinymce-editor-param-after-initialized – Thariama Dec 14 '12 at 16:30

score 57 · Answer 2 · answered Mar 14 '16 at 08:40

57

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

answered Mar 14 '16 at 08:40

grajsek

856
2
11
24

2

This also appears to be the only working solution in 4.3.x as other suggestions simply do not work. – Jacek Prucia May 11 '16 at 15:39
2

Problem is that it doesn't only disable editing but all plugins as well, including Preview and see the source code – Jérôme MEVEL Sep 13 '16 at 07:20
1

This was the only solution that worked for me. It's also the cleanest solution presented. – BrianLegg Feb 07 '17 at 17:46
3

Great! You can also use `tinyMCE.get('editor_ID').setMode('readonly');` – Стас Пишевский Oct 02 '17 at 09:14
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 – blazetango Jan 01 '21 at 23:37
@blazetango check the comment above yours – grajsek Jan 04 '21 at 12:41
@grajsek I can explain what I meant – blazetango Jan 12 '21 at 07:04

score 26 · Answer 3 · answered Mar 17 '14 at 16:31

26

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

answered Mar 17 '14 at 16:31

Makiavelo

369
3
3

1

Despite of the textarea gets disabled, it still can be modified with the toolbar, or bt selecting all the content whit double click – Rumpelstinsk Mar 08 '16 at 11:33

score 16 · Answer 4 · edited May 23 '17 at 12:18

16

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

edited May 23 '17 at 12:18

Community

1
1

answered Aug 16 '13 at 16:54

josephdpurcell

1,157
3
16
34

score 3 · Answer 5 · answered Mar 11 '21 at 23:01

3

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

answered Mar 11 '21 at 23:01

Sat Thiru

922
2
10
20

Yeah, the React version is a little different. The docs mention `readonly` getting overridden: https://www.tiny.cloud/docs/integrations/react/#init – cyclingLinguist Apr 28 '23 at 21:34

score 2 · Answer 6 · answered Jan 13 '16 at 12:55

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

score 2 · Answer 7 · answered Oct 02 '19 at 10:35

2

For the latest 5.x version, use

editor.mode.set('readonly')

and

editor.mode.set('design')

answered Oct 02 '19 at 10:35

Dakusan

6,504
5
32
45

score 1 · Answer 8 · edited May 23 '17 at 12:18

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

Basheer AL-MOMANI · Answer 9 · 2016-10-19T16:59:28.403

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

score 1 · Answer 10 · answered May 04 '21 at 18:46

1

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

answered May 04 '21 at 18:46

Tawani Anyangwe

9
1

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. – Michael Rovinsky May 04 '21 at 19:26

score 0 · Answer 11 · answered Oct 04 '13 at 06:23

0

Maybe this code line helps in others browsers using iframes.

tinymce.activeEditor.getBody().contenteditable = false

Regards!

answered Oct 04 '13 at 06:23

antoniosanct

38
8

score 0 · Answer 12 · answered Jan 03 '18 at 16:40

0

That works for ASP.NET MVC Razor

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

while initializing tinyMCE:

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

answered Jan 03 '18 at 16:40

adam.bielasty

671
9
20

score 0 · Answer 13 · answered Mar 30 '23 at 16:39

0

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

answered Mar 30 '23 at 16:39

Eric Wang

1

make readonly/disable tinymce textarea

13 Answers13

Linked