how to disable tinymce editor

Question

I want to disable tinymce editor using Javascript. Actually, I have two radio buttons: 1) On & 2) Off.

When the user selects the Off radio button, my tinymce editor should be readonly/disabled & when the user selects the On radio button, my tinymce editor should be enabled.

How can I achieve that?

EDITED:- (As it is not working in IE8)

tinyMCE.init({
    force_p_newlines : false,
    force_br_newlines : false,
    forced_root_block : false,
    convert_newlines_to_brs: false,
    // Not to add br elements.
    remove_linebreaks : true,

    mode : "textareas",
    theme : "advanced",
    plugins : "safari",
    convert_urls : false,
    width : "560",
    height : "15",
    theme_advanced_buttons1 : "fontselect,fontsizeselect, separator, bold,italic,underline,separator,forecolor,backcolor,justifyleft,justifycenter,justifyright,justifyfull",

    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src| border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});

This code is used to disable:

function tinymce_state(id, disable){
    var state = (disable==true)? 'Off' : 'On'
    tinymce.get(id).getDoc().designMode = state;
    tinymce.get(id).controlManager.get('fontselect').setDisabled(disable);
    tinymce.get(id).controlManager.get('fontsizeselect').setDisabled(disable);
    tinymce.get(id).controlManager.get('bold').setDisabled(disable);
    tinymce.get(id).controlManager.get('italic').setDisabled(disable);
    tinymce.get(id).controlManager.get('underline').setDisabled(disable);
    tinymce.get(id).controlManager.get('forecolor').setDisabled(disable);
    tinymce.get(id).controlManager.get('backcolor').setDisabled(disable);
    tinymce.get(id).controlManager.get('justifyleft').setDisabled(disable);
    tinymce.get(id).controlManager.get('justifycenter').setDisabled(disable);
    tinymce.get(id).controlManager.get('justifyright').setDisabled(disable);
    tinymce.get(id).controlManager.get('justifyfull').setDisabled(disable);
}

Have you seen the other question about this? http://stackoverflow.com/questions/3455525/how-to-disable-tinymces-textarea — StarQuake, Jul 19 '12 at 14:24
for 4.3.13 this works: http://stackoverflow.com/questions/13881812/make-readonly-disable-tinymce-textarea/35982854#35982854 — Alexander, Jun 23 '16 at 15:21

score 15 · Accepted Answer · edited Mar 19 '12 at 12:09

15

You may use the following to block input in the editor:

// blockeditor input
tinymce.get('editor_id').getDoc().designMode = 'Off'; // switches editable off

// turn it on again
tinymce.get('editor_id').getDoc().designMode = 'On'; // switches editable on

You still need to find a way to block the tinymce UI. You could deactivate EACH control you have loaded (in the init function) using a line for EACH one of them

// example control bold
tinymce.get('editor_id').controlManager.get('bold').setDisabled(true);

// turn it on again
tinymce.get('editor_id').controlManager.get('bold').setDisabled(false);

EDIT:

You could change the contenteditable property of your rtes iframe body. Downside will be that you will have to disable the tinymce UI (buttons) seperatly

// disable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'false');

// enable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'true');

edited Mar 19 '12 at 12:09

Salil

46,566
21
122
156

answered Mar 28 '11 at 13:25

Thariama

50,002
13
138
166

wow gr8 stuff dear........it works for me ........but i not marked it as accepted yet as there may be easier way to disable/enable tinymce Editor as well as UI..........neway thanx a million Thariama....... – Salil Mar 31 '11 at 05:38
i would like to know too if there is an easier method (but there might be none) – Thariama Mar 31 '11 at 07:59
It doesn't work for TinyMCE 3.4.5. The designMode property is already equal to "off"; changing it back and forth from "on" to "off" a few times has no effect. – Jim Raden Dec 13 '11 at 17:30
you are using which browser(s)? i edited my post showing another way – Thariama Dec 14 '11 at 08:58
I just check in IE8 and it gives me weird issue. My current page is get loaded into the editor.This happens only in IE8.When i check using IE Development Tool and it gives me error "object is undefined or null " @ tinymce.get – Salil Mar 19 '12 at 06:35
you will have to replace 'editor_id' with the id of your textarea/html element. could you post your tinymce config, this could help too? – Thariama Mar 19 '12 at 08:33
@Thariama:- check my code EDITED:- (As it is not working in IE8) in question – Salil Mar 19 '12 at 12:17
@Thariama: Yes, there is only one editor.........and it works fine on all the browsers but IE8 – Salil Mar 19 '12 at 13:13
in this case we need to find out what goes wrong in IE to find a workaround. can you find the line where the error occurs? if tinymce.get is the problem here (what i don't think is) you can use tinymce.editors[0] then instead – Thariama Mar 19 '12 at 14:38
Great stuff. Contenteditable works great except in IE8. Any idea why? For now the only way I have found to disable the editor in IE8 is using a glass panel (opacity 0) above the editor to capture all events. – Javier Ferrero Dec 10 '12 at 17:52
1

for 4.3.13 this works: http://stackoverflow.com/questions/13881812/make-readonly-disable-tinymce-textarea/35982854#35982854 – Alexander Jun 23 '16 at 15:22

score 2 · Answer 2 · answered Nov 14 '14 at 17:25

For some reason the collection of editors has two type of ID, the numeric ID (0,1, ... n) and an alpha ID (Testing1, testing2, ... xyx) the commands in the code snippet only work with the aplha-based ID e.g. "Testing1"

I have twelve tinyMCE version 4.1.5 editors in my project and can disable all of them with this code:

for (editor_id in tinyMCE.editors) { 
    if (editor_id.length > 2) { //there are twelve editors in my project so ignore two-digit IDs
        tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1');
        tinymce.EditorManager.execCommand('mceRemoveControl', true, editor_id);
        tinymce.EditorManager.execCommand('mceRemoveEditor', true, editor_id);
        tinymce.EditorManager.execCommand('mceAddControl', true, editor_id);
        tinymce.EditorManager.execCommand('mceAddEditor', true, editor_id);
    }
}

This site helped me figure it out: http://jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form

score 2 · Answer 3 · answered Jul 09 '20 at 23:45

2

To disable the editor use: tinymce.activeEditor.mode.set('readonly');

To enable the editor use: tinymce.activeEditor.mode.set('design');

Tested on version 5.x

answered Jul 09 '20 at 23:45

Yadiana Molina

121
1
2

score 1 · Answer 4 · answered May 20 '20 at 14:27

1

You can cover with a white div opacity .7 and higher z-index.

answered May 20 '20 at 14:27

jason ionno

11
1

score 0 · Answer 5 · answered Dec 03 '14 at 12:50

You can use in 3.x the option

editor_deselector : "no_mce",

to disabled (so give the textarea the css class no_mce). You can toggle the CSS Class with jQuery for example.

In 4.x you can use the option

selector:'textarea.not(.no_mce)'

Hope that helps.

(Oviously you can change the CSS Class to whatever you want)

score 0 · Answer 6 · answered Sep 11 '19 at 14:21

0

For old 3 ver you can use:

tinyMCE.getInstanceById(tinyMCE.activeEditor.id).getBody().classList.add("mceNonEditable");

answered Sep 11 '19 at 14:21

user79871

101
2

how to disable tinymce editor

6 Answers6