TinyMCE textarea can't edit

Question

Here is the problem. In my php submission page, I have a form with multiple fields including a textarea which is currently using TinyMCE and I also have an option for duplicating existing form. The thing is I can't edit the 2nd editor that was duplicated but the editor appear in textarea place. However I can edit and save 1st editor. I am not sure if its a bug or just me doing something wrong? I tried to update TinyMCE as well but didn't work.. any idea?

function initTinyMCE() {
   tinyMCE.init({
       mode : "textareas", //mode : "exact", elements : "mytextarea"
       theme : "simple"
   });
}
initTinyMCE();


$(document).ready( function(){
    $('a#addmore').live('click', function(){

         //*clone the existing form and inserting form here*
         initTinyMCE(); 
    });

    $('a#toSubmit').live( 'click', function() {
      tinyMCE.triggerSave();
      $('.editwork-form').submit();
});

});

Answer 1

I can't seem to get .clone() to work, nothing in the debug console either. However, my working solution is as follows, maybe this helps?

initTinyMCE();

$("#append").live("click", function() {
    var ta_count = $("textarea").length;

    var elem = document.createElement("textarea");
    $(elem).attr("id", ta_count.toString());
    $(elem).appendTo("#ta_container");

    initTinyMCE();
});

function initTinyMCE() {
    tinyMCE.init({
        mode: "textareas",
        theme: "simple",
        theme_advanced_path: false
    });
}​

Instead of .clone()ing the element, I'm just creating a new textarea and appending it to the container (using the count of all textareas on the page as it's ID to make it unique), then re-calling the tinyMCE initialiser.

Example jsFiddle

Answer 2

Make sure your textareas have different ids, otherwise there won't be a second editor instance! This is a crucial thing when creating tinymce editor instances.