Question

I have list of textareas. For textareas I use tinyMCE Editor. When I start sorting this list of textareas, inside these textareas everything disappears. I mean the iframes do not refresh their content.

<ul id="sortable">
<li class="ui-state-default"><br />
    <textarea id="1"></textarea>
</li>
<li class="ui-state-default"><br />
    <textarea name="2" id="2"></textarea>
</li></ul>

my.js file

    tinyMCE.init({
    mode : 'textareas',
    theme : 'advanced',
    theme_advanced_buttons1 : 'save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect',
    theme_advanced_buttons2 : '',
    theme_advanced_buttons3 : '',       
    theme_advanced_toolbar_location : 'top',
    theme_advanced_toolbar_align : 'left',
    theme_advanced_statusbar_location : 'bottom',
    theme_advanced_resizing : false
});
    $( "#sortable" ).sortable({

    }); 

TinyMCE works perfect till I drag the <li> where this textarea is placed. Code inside <iframe> disappeared.
Can I somehow prevent refreshing the iframe content?

Answer 1

Problem here is that you cannot move the editor in the dom easily.
The solution is to first shut down the tinymce instance (id needed!)

tinymce.execCommand('mceRemoveControl',true,'editor_id');

then do the DOM action and reinit the tinymce instance

tinymce.execCommand('mceAddControl',true,'editor_id');