How to clone and have multiple wysihtml editors on the same page?

I have a problem getting the wysihtml plugin work when i want to add more than just one instance of it on a page. I have some jQuery code that clones a div and its content and adds it to the page. So far that is working great, but when i add the initiation of wysihtml5 its not working on the added elements. Seams that i get double menu's and input is disabled.

I can enable the script using: $('.mini-textarea').wysihtml5();

My working code for clone is:

$(".cloneContentFromDiv").click(function(e){
    e.preventDefault();
    $('.clone-this-div').first().clone().appendTo('.apend-to-this');

});

Do i have to remove and re-initiate the wysihtml5 function? if so how to do that in best way possible?

Would a soulution be somthing like:

//clone and add product specs
$(".cloneContentFromDiv").click(function(e){
    e.preventDefault();

    $('.clone-this-div').first().clone().appendTo('.apend-to-this').find('.name').val('');  

    $('.textarea').remove();
    $('.textarea').wysihtml5();

});

Solution

The Wysihtml5 plugin (annoyingly) doesn't have a destroy method, hence you have to reinitialise the originally generated Wysihtml5 element manually otherwise you'll see weird artefacts like the double toolbars you are seeing now.

I wrap the original text area in a surrounding div, so it easier to find and destroy later:

<div class="richtextedit">
    <textarea id="textarea-1" class="textarea"></textarea>
</div>

Save a reference to the cloned element:

var newElem = $('.clone-this-div').first().clone();

Once you clone the element, you need to manually destroy the generated Wysihtml5 element in your cloned element, and reconstruct it from scratch:

var num = $('.textarea').length + 1; //num is the total count of the cloned textareas

newElem.find('.richtextedit').html('');
newElem.find('.richtextedit').html('<textarea id="textarea-'+num+'" class="textarea"></textarea>');

Then you can add the cloned element into the page and setup the Wysihtml5 element using an id as the reference (not a class) so it doesn't affect other working Wysihtml5 on the page.

newElem.appendTo('.apend-to-this'); 

$('#textarea-'+num).wysihtml5();

Note you don't need to modify the original contents of the text area using

.find('.name').val('')

since you have reconstructed the element.

Replace your 3 lines below with my steps above and you should be good to go.

$('.clone-this-div').first().clone().appendTo('.apend-to-this').find('.name').val('');  

$('.textarea').remove();
$('.textarea').wysihtml5();