Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts

    TinyMCE instances playing nicely with jQuery sortables.

    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.

    Code:
    $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', false, 'textarea1' );
                                        $(this).sortable( "refresh" );
                                }
                        });
    Any suggestions, solutions, advice would be greatly appreciated

  • #2
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    My last plea for anybodies suggestions

  • #3
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Once more for good luck

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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, 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.

  • #5
    New Coder
    Join Date
    Mar 2008
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •