Question

I can’t figure it out why the tinyMCE won’t execute on a toggled block.

Javascript:

$(document).ready(function(){

    // Turn ON tinyMCE for every .tiny_editor
    tinyMCE.init({  
        language : 'es',
        mode: 'textareas',
        editor_selector : "tiny_editor",
        theme: 'advanced',

        theme_advanced_toolbar_align: 'left',
        theme_advanced_toolbar_location: 'top',
        theme_advanced_statusbar_location: 'bottom',

        plugins: 'table,advhr,advlink,preview,advimage,media,searchreplace,print,fullscreen',

        theme_advanced_buttons1: 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,outdent,indent,|,fontselect,fontsizeselect,forecolor,backcolor',
        theme_advanced_buttons2: 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,undo,redo,|,link,unlink,anchor,advhr,|,sub,sup,|,charmap,image,media,|,cleanup,removeformat,code,fullscreen',
        theme_advanced_buttons3: 'tablecontrols,|,preview,print,|,help',

        extended_valid_elements: 'iframe[align<bottom?left?middle?right?top|class|frameborder|height|id|longdesc|marginheight|marginwidth|name|scrolling<auto?no?yes|src|style|title|width]'
    });

        // Clear checkbox
    $('.entradilla_check').attr('checked', false);
        // On checkbox value change (set or not), toggle .entradilla_box
    $('.entradilla_check').change(function(){
        $('.entradilla_box').toggle('slow');
    });

});

HTML:

<textarea style="width: 100%; height: 200px; display: none;" name="entradilla" class="tiny_editor entradilla_box">
    <?=$news_row['abstract'];?>
</textarea>

The toggle works, but when the textarea shows… it shows without the tinymce

Answer 1

This is the best I could do. I used tinymce.hide and tinymce.show.

Show

Hides the editor and shows any textarea/div that the editor is supposed to replace.

Hide

Shows the editor and hides any textarea/div that the editor is supposed to replace.

var tinymcevisible = true;
$('#show').click(function() {
    if (tinymcevisible) {
        tinyMCE.get('second').hide();
        $('#second').hide();
        tinymcevisible = false;
    } else {
        tinyMCE.get('second').show();
        tinymcevisible = true;
    }
});

DEMO

Hope this helps