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

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('

Chargement de l\'onglet
');
            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"
    }); 
});