Jquery-ui sortable on divs with TinyMCE editors makes text fade

Question

following the instructions: http://www.farinspace.com/multiple-wordpress-wysiwyg-visual-editors/

I have some good WYSIWYG editors in my exchangers

my markup looks like this:

<div class="sortable"> <div class="sortme"> <?php $mb->the_field('extra_content2'); ?> <div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div> </div> <div class="sortme" <?php $mb->the_field('extra_content3'); ?> <div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div> </div> </div> 

which is just WP_alchemy (also from farinspace.com) for a text box wrapped in a div

and a script that says tinymce should kick:

 function my_admin_print_footer_scripts() { ?><script type="text/javascript">/* <![CDATA[ */ jQuery(function($) { var i=1; $('.customEditor textarea').each(function(e) { var id = $(this).attr('id'); if (!id) { id = 'customEditor-' + i++; $(this).attr('id',id); } tinyMCE.execCommand('mceAddControl', false, id); }); }); /* ]]> */</script><?php } // important: note the priority of 99, the js needs to be placed after tinymce loads add_action('admin_print_footer_scripts','my_admin_print_footer_scripts',99); 

this part is working fine. but when I try to use jqueryUI to sort:

 $('.sortable').sortable(); 

it allows me to sort several .sortme sections, but the content in the editors disappears. how can i save the text? It works great with tinymce editors, so I assume this is a conflict with somehow.

Answer 1

This ( $('.sortable').sortable(); ) will not work with tinymce editors. The tinims do not like being dragged around the house. To make it work, you first need to close Tinymce

 tinyMCE.execCommand('mceRemoveControl', false, id); 

then sort and then reinitialize them

 tinyMCE.execCommand('mceAddControl', false, id);