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

Answer 1

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

Answer 2

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