jquerytinymcesortables

Adding and Removing tinyMCE instances within jQuery instances


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?


Solution

  • 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);
    }