How to disable tinymce editor

Question

I want to disable the tinymce editor using Javascript. In fact, I have two switches: 1) On and 2) Off .

When the user selects the Off switch, my tinymce editor should be readonly/disabled , and when the user selects the On switch, my tinymce editor should be enabled .

How can i achieve this?

EDITED: - (since it does not work 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 can 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 user interface. You can disable the EACH control you loaded (in the init function) using the line for EACH 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 can change the contenteditable property of your iframe. The downside will be that you have to disable the tinymce user interface (buttons) separately

 // 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 types of IDs, a numeric identifier (0,1, ... n) and an alpha identifier (Testing1, testing2, ... xyx), the commands in the code fragment work only with the identifier based on aplha, eg. "Testing1"

I have twelve tinyMCE editors 4.1.5 in my project and can disable them all 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 out: http://jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form

Answer 3

You can use the 3.x option

editor_deselector: "no_mce",

disabled (so give textarea a css class no_mce). You can, for example, switch the CSS class using jQuery.

In 4.x you can use the option

selector: 'textarea.not (.no_mce)'

Hope this helps.

(Obviously, you can change the CSS class to whatever you want)