Question

Odd problem here.

Working with an existing system that uses TinyMCE as it’s text editor.

I’ve created a page which contains a whole lot of movable divs using jquery sortables. Now TinyMCE doesn’t seem to like being moved in the dom so after doing a bit of research it appears I have to remove the tinymce instance from the textbox within the div being moved and add it back in at the end of the drag. I can do remove the instance fine but however when I go to add it back in, it won’t.

I have the most up to date version of TinyMCE, a slightly older version of jQuery (tried updating but no luck).

Can’t work this out hence this post 🙂

 $(function() {
    $("#categoryorder").sortable({ 
    opacity: 0.6, 
    cursor: 'move',
    revert: true,
    forcePlaceholderSize: true,
    scrollSensitivity: 40, 
    start: function(e, ui) {
             tinyMCE.execCommand( 'mceRemoveControl', false, 'textarea1' );
    },
    stop: function(e,ui) {
            // won't add back here for some reason
            tinyMCE.execCommand( 'mceAddControl', false, 'textarea1' );
            $(this).sortable( "refresh" );
    }
    });
});

Not sure why it won’t add back, any ideas?

Answer 1

I know this is an oldish post but incase someone if googling for this issue:

I am not sure what you are trying to achieve with the refresh call to sortable.

but this is what I did to make it work for me

I am using the jquery.tinymce – just to try it out..
I have the tinymce settings elsewhere so I can call different settings depending what I am initializing but the concept is sound – so here are my start and stop methods for sortable

start : function(event, ui) {
// mce editor needs to be removed and readded when move finsihed
     $("textarea",ui.item).tinymce().remove();
},
stop : function(event, ui) {
     $("textarea",ui.item).tinymce(myconfig.tinymcesettings);
}