TinyMCE with ajax tabs

Question

I\'m using tabs component of JQuery UI 1.8, and I\'m loading content of tabs via ajax (html content). In one of this tabs I\'m using tinyMCE component, and when I load this

Answer 1

You need to shut down your tinymce instances before you switch to another tab else the editor element with that id will be blocked.

Remove the control before you switch the tab using

// the_editor_id equals the id of the underliing textarea
tinyMCE.execCommand('mceRemoveControl', false, the_editor_id);

Answer 2

Well, spent 3 hours on the same problem today... with Jquery UI 1.10 and TinyMCE 4.

The problem is, when unselected, the content of the ajax panel isnt removed from the DOM but just hidden. That means the textarea could be more than 1 time in the DOM (navigating the panels). => Death of tiny MCE...

There is no event in Jquery 1.10 to catch an "unselected panel". You have to deal with the before load event.

So the idea is to empty each "ajax loaded" panel before to load a panel. The code :

$( "#list_onglet_lecteur" ).tabs({
    beforeLoad: 
        function( event, ui ) {
            $("#list_onglet_lecteur div[role=tabpanel]").each(function(){
                if($(this).attr("id") != "list_onglet_lecteur-accueil")$(this).empty();
            });

            $(ui.panel).html('<div style="width:100%;text-align:center"><img src="/images/ajax_loader_big.gif" alt=""></img><br />Chargement de l\'onglet</div>');
            ui.jqXHR.error(function() {
                ui.panel.html("Echec du chargement de l'onglet. Merci d'actualiser la page.");
            });
    } 
})

Note i havn't find the way to make the difference between "ajax loaded panels" and "pre-loaded panels"... That's a shame because you have to add each "pre-loaded panel" ids into the code...

Anyway, that resolve the tiny MCE problem. No need to init into the load event, and use the mceRemoveControl/mceAddControl commands. Just init the tinyMCE edit in the "ajax loaded tab panel" view :

 $(function() {   
    tinyMCE.init({
        height : 300,
        mode : "specific_textareas",
        editor_selector : "mceEditor",
        theme : "modern",
        language : 'fr_FR',
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media contextmenu paste moxiemanager"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    }); 
});

Answer 3

When I was having similar problems with TinyMCE and switching between ajax loaded tabs I found this wonderful piece of code at Ready4State so I thought I would share as I hope it helps others.

This will remove all instances of TinyMCE on the page.

var i, t = tinyMCE.editors;
for (i in t){
  if (t.hasOwnProperty(i)){
    t[i].remove();
  }
}    

Then you can safely reinitialize TinyMCE.

Personally I carry out the above code before using a switch statement to handle each ui.index, and I have a function that performs the initialisation for TinyMCE. So I just call that function in each of the relevant case statements.

Hope this helps someone else.

Answer 4

It might be worth re-initialising tiny MCE every time you switch back to the tab with the editor in. You can use the "select" event on the tab object.

$( ".selector" ).tabs({
  select: function(event, ui) { 
    // initialise Tiny MCE here
  }
});

You may have to destroy any previous instances of / references to the editor before re-initialising.

Answer 5

I found the solution to my problem. The initialization of tinymce must be in load event of jquery tabs, like this:

$("div#tabs").tabs ({collapsible: false
                    ,selected:    -1
                    ,fx: {opacity: 'toggle'}
                    ,load: function (event, ui) {

                       // Tab with tinyMCE
                       if (ui.index == 0) {
                          tinyMCE.init({mode: "none",
                                        theme: "advanced",
                                        theme_advanced_toolbar_location: "top",
                                        theme_advanced_toolbar_align: "left"
                                       });
                          tinyMCE.execCommand ('mceAddControl', false, 'text_area_id');
                       }
                       else {
                         tinyMCE.triggerSave();
                         tinyMCE.execCommand('mceFocus', false, 'text_area_id');
                         tinyMCE.execCommand('mceRemoveControl', false, 'text_area_id');
                       }
                     }
              });

I hope this helps others. Besides, if the content of the textarea is load via ajax, the command:

tinyMCE.triggerSave();

is not necesary.