TinyMCE instances in jquery sortable

Question

I'm stumped and frustrated so time to ask for help. Done a lot of googling but yet to find a solution that works for me.

What I have is a whole bunch of divs that can be sorted using Jquery sortable, some of divs contain a TinyMCE instance. Which is all fine until you try to move a div that contains a TinyMCE instance - when you do TinyMCE seems to refresh itself and creates a new instance which you then therefore lose the data etc. And then the whole page breaks as the javascript no longer works :). During this time I get javascript constructor errors etc in Firebug.

What I have decided the best way to go is when the div starts to get dragged remove tinymce from the text area and when it is placed in it's new position insert tinymce back in.

I can remove it fine but having trouble adding it back in - as I get more constructor errors.

Note: TinyMCE automatically gets added to all my text areas within the system I'm using so trying to avoid messing with TinyMCE.

In the code below I'm simply targeting a specific textarea id for testing purposes.

$cols.sortable({
                            cursor: 'move',
                            revert: true,
                            opacity: 0.6,
                            placeholder: 'widgetplaceholder',
                            forcePlaceholderSize: true,
                            connectWith: cols,
                            zIndex:9000,
                            cancel: ".collapsable_box_editpanel_groups, .collapsable_box_content",
                            start: function(e, ui) {
                                     // removes tinymce ok from textarea
                                     tinyMCE.execCommand( 'mceRemoveControl', false, 'textarea1' );

                            },
                            stop: function(e,ui) {
                                    // breaks here - constructor error
                                    tinyMCE.execCommand( 'mceAddControl', true, 'textarea1' );
                                    $(this).sortable( "refresh" );
                            }
                    });

Anybody else have any other solutions? If you need more information please let me :)

Answer 1

Hey if you already have data in your MCE instances, to avoid losing it, you can try this:

start: function(e, ui){
    $(this).find('.tinyMCE').each(function(){
        tinyMCE.execCommand( 'mceRemoveControl', false, $(this).attr('id') );
    });
},
stop: function(e,ui) {
    $(this).find('.tinyMCE').each(function(){
        tinyMCE.execCommand( 'mceAddControl', true, $(this).attr('id') );
        $(this).sortable("refresh");
    });
}

In my case i classed all MCE Instances with .tinyMCE

Answer 2

For version 4 of TinyMCE

start: function (e, ui) {
  $(ui.item).find('textarea').each(function () {
     tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
  });
},
stop: function (e, ui) {
  $(ui.item).find('textarea').each(function () {
     tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
  });
}