TinyMCE - adding an ON/OFF toggle switch

Question

I'm using TinyMCE on the text-areas in my Magento admin section. I have my TinyMCE editor visible form the start, but I want the option to disable/re-enable it.

I'm using the jQuery plugin version, so I added some script, which is almost working. However, it's only affecting the first instance of TinyMCE - if there are any other instances of it on the page, they are not affected.

I used this example http://tinymce.moxiecode.com/examples/example_23.php as a base for what I've done so far. But still can't figure out why it's affecting the first instance only. Any ideas? Here's my code:

var $j = jQuery.noConflict();
// Add ON OFF toggle switch
$j(function() {
$j('textarea').after("<br/><span class=\"toggle form-button\">Toggle TinyMCE</span>"); 
$j("span.toggle").toggle(function(){
$j('.wrapper').find('textarea').tinymce().hide();
        }, function () {
$j('.wrapper').find('textarea').tinymce().show();
    });
});

Answer 1

Works ok if I repeat the script for each separate text area, like textarea:eq(0), textarea:eq(1) etc. Don't know why, but it'll do.

UPDATE:

The way they have the jQuery show/hide example on the tinymce site doesn't actually work. Instead of just hiding the editor, you actually need to unload and then reload it, or else any changes made in the "toggled off" state won't be saved when the form is submitted. So you should do something like the following:

$(function() {
    var id = 'tinytextareaID'; // ID of your textarea (no # symbol) 
        $("a.toggle").toggle(function(){
           tinyMCE.execCommand('mceRemoveControl', false, id);
        }, function () {
            tinyMCE.execCommand('mceAddControl', false, id);
    });
});

Answer 2

For anyone looking for TinyMCE version 4.x you can use:

tinymce.EditorManager.execCommand('mceToggleEditor', true, textarea_id);

Answer 3

In case it can help anyone, I can say that I never got it working right with the jquery helper when I had multiple tinymce instances on the same page. In fact, I'm not sure if it makes sense to use jquery for this since you would be loosing the chance to work in the "init once" methodology that tinymce enables. So I just wrote a couple functions to handle the toggling:

function showBlogEditor(strItemId){
    var theeditor = tinyMCE.get(strItemId); //strItemId is the ID of the HTML element
    if(theeditor && theteditor.initialized){
        //you can do something here if you need
    }else{
        tinyMCE.execCommand('mceAddControl', false, strItemId);
    }
}
function hideBlogEditor(strItemId){
    if (tinyMCE.getInstanceById(strItemId))
    {
            tinyMCE.execCommand('mceFocus', false, strItemId);
            tinyMCE.execCommand('mceRemoveControl', false, strItemId);
    }           
}

Also, I just stopped using the jquery helper to initialize and initialized like this:

/* it is the mode: "none" that matters here. You are initializing the tinymce object without creating a visual manifestation of it. Then the show and hide functions will turn the control on and off */
    tinyMCE.init({
        theme : "advanced",mode : "exact",
        mode : "none", 
        plugins : strplgns,
        theme_advanced_buttons1 : strbtns1,
        theme_advanced_buttons2 : strbtns2,
        theme_advanced_buttons3 : strbtns3,
        content_css : "/css/hlsl.css"
    });     

Really, after all the time I wasted trying to get it to work with jquery, I just use the tinymce object directly. Since init is just called once, all the editors come up looking and working the same.

Answer 4

On my pages I switch between vanilla HTML 'textarea' and tinymce editor. I use tinymce 4. The recepies above don't work anymore in version 4. In order not to loose textarea content on submit in either case I found this solution:

<script>
function toggle_tinymce_checkbutton(checkButtonId,strItemId){
var toggle = $('#'+checkButtonId);  // checkButtonId = id of checkbutton w/o #
if(toggle.attr('value') == 'on') {
	var editor = tinymce.EditorManager.get(strItemId); // strItemId = id of textarea w/o #
	editor.remove();
	toggle.attr('value','off');
} else {
	var editor = tinymce.EditorManager.createEditor(strItemId,tinymce_settings);
	editor.render();
	toggle.attr('value','on');}
}
</script>

'tinymce_settings' is this dictionary of editor-options:

<script>
tinymce_settings = {
	  selector: '#cm_pages_body',
	  height: 300,
	  width:767,
	  statusbar: false,
	  convert_urls: false,
	  valid_children: '+body[style]',
	  plugins: [
	    'advlist autolink lists link image charmap print preview anchor',
	    'searchreplace visualblocks code fullscreen',
	    'insertdatetime media table contextmenu paste code',
	    'textcolor',
	  ],
	  toolbar: 'undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code',
	  content_css: [
	    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
	    '//www.tinymce.com/css/codepen.min.css'
	  ],};
</script>