javascript - TinyMCE with ajax tabs - Stack Overflow

admin管理员组

文章数量:1332395

I'm using tabs ponent 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 ponent, and when I load this tab the first time, the tiny initializates correctly but if I navegate to other tab and I recall the tab again the tiny breaks down.

This occurs when the import of tiny_mce.js is outside the contents of tabs. When I move the import into tab call, the tiny didn't load because it seems to be not initialized.

The question is: how can initialize tiny in an ajax tab?

Thanks in advance.

I'm using tabs ponent 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 ponent, and when I load this tab the first time, the tiny initializates correctly but if I navegate to other tab and I recall the tab again the tiny breaks down.

This occurs when the import of tiny_mce.js is outside the contents of tabs. When I move the import into tab call, the tiny didn't load because it seems to be not initialized.

The question is: how can initialize tiny in an ajax tab?

Thanks in advance.

• javascript
• jquery
• tinymce

Share Improve this question Follow asked Sep 28, 2011 at 11:47 user731136user731136 2

• You need to call .tinyMCE() or whatever (I don't use it myself) on an element in your AJAX plete/success function. – Bojangles Commented Sep 28, 2011 at 11:50
• If I initialize the tiny in the ajax content and the import of tiny_mce.js is on the "parent document" (that contents the tabs), only works fine the first time. If the import of .js is in ajax content, don't work never. – user731136 Commented Sep 28, 2011 at 12:48

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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.

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

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 mand:

tinyMCE.triggerSave();

is not necesary.

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 mands. 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"
    }); 
});

本文标签： javascriptTinyMCE with ajax tabsStack Overflow