View Full Version : TinyMCE instances playing nicely with jQuery sortables.

10-20-2010, 03:08 AM
Hi guys,

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 so this is a last resort.

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.

cursor: 'move',
revert: true,
opacity: 0.6,
placeholder: 'widgetplaceholder',
forcePlaceholderSize: true,
connectWith: cols,
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', false, 'textarea1' );
$(this).sortable( "refresh" );

Any suggestions, solutions, advice would be greatly appreciated :)

10-21-2010, 08:39 PM
My last plea for anybodies suggestions :)

10-26-2010, 03:58 AM
Once more for good luck :)

10-26-2010, 11:21 AM
Well, I don't know whether this helps, but I've just added TinyMCE to an existing page I had with jQuery UI Sortable on it, and I don't seem to get any errors, using Firefox at least. Here's the page (http://simonbattersby.com/test/test_mce.htm), again if it helps.

On dragging I see the TinyMCE instance removed and the resultant code displayed instead, and on drop the TinyMCE instance reloads fine.

10-27-2010, 02:54 AM
Thanks for this. However did you notice however how the text from the 2nd editable box disappears on the drop?

That was the original problem I had.