CODEWITHSUNDEEP
jquerymagentotinymce
Marlon Creative
Marlon Creative

Reputation: 3846

TinyMCE - adding an ON/OFF toggle switch

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

Upvotes: 5

Views: 17281

Answers (4)

Tom
Tom

Reputation: 273

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

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

Upvotes: 10

user3312954
user3312954

Reputation: 11

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>

Upvotes: 1

lequebecois
lequebecois

Reputation: 183

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.

Upvotes: 1

Marlon Creative
Marlon Creative

Reputation: 3846

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

Upvotes: 11

Related Questions