TinyMCE problems in jQuery Tabs

I'm trying to implement TinyMCE in jQuery Tabs, which are loaded by AJAX

In the view of the first tab I load the init as followed:

    $( "#tabs" ).tabs({
         load:function(event, ui){
          if(ui.index==5){
             if(typeof TinyMCE == "undefined") {

            tinyMCE.init({
                // General options
                mode : "specific_textareas",
                editor_selector : "mceEditor",
                theme : "simple",
            }); 
        }

Tab 5 contains the textarea's.

The first time when I load the tab, the textarea is changed in a TinyMCE field. I can get the content of this textarea by using

var note = tinyMCE.get('note').getContent()

The problem is, it only works the first time when this tab is loaded. When I press another tab, and go back to tab 5, the 开发者_JS百科id is already changed in an tiny_mce ID. So I can only get the content the first time when I press the tab..

Anybody knows how to solve this problem? Thanks!

---

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