Move TinyMCE with jQuery

Question

I have 2 (or more) <textarea>s initialized with TinyMCE-3.4.8-jQuery in a <ul>.

<ul id="content">
<li id="bc1"><textarea id="text1" class="blockcontent"></textarea></li>
<li id="bc2"><textarea id="text2" class="blockcontent"></textarea></li>
<li id="bc3"><textarea id="text3" class="blockcontent"></textarea></li>
</ul>

The "Block Contents" will be initialized with $('.blockcontent').tinymce({...});.

If I insert #bc3 after #bc1 with $('#bc3').insertAfter($('#bc1')); the content will be deleted. The content of the #text3 textarea is no longer avaiable. It's gone away. How to fix this?

I have also tried to clone #bc3 $('#bc3').clone(true, true), insert the clone after #bc1 and remove the original #bc3. To fix the "jQuery Input Clone Bug" I used the jquery.fix.clone jQuery plugin. But the clone method also has the same issue as the insertAfter method. Maybe the insertAfter does the same: clone and remove. Don't know, whatever. If I first remove the original and then insert the clone the TinyMCE is not avaiable in the clone but the content of the cloned textarea is available. If I first insert the clone and then remove the original the TinyMCE is available but not the original content.

Br

Answer 1

Moving tinymce around in the DOM does not work as you would like to here. Before you move it around you need to call mceRemoveControl and then after you moved the editor source element you may reinitialize the editor.

Cloning will yield to identical ids. Tinymce doesn't allow identical ids. Better make sure your source html elements have a unique id (not none).