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 eg "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

Answer 3

您可以使用白色 div 不透明度 0.7 和更高的 z-index 进行覆盖。

Answer 4

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

Answer 5

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)

Answer 6

For old 3 ver you can use:

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