CKEDITOR and jquery drag and drop makes content disappear

Question

I'm using multiple CKEditor instances withing a CMS and have added the ability to drag and drop the multiple boxes to reorder the content for the user so they can choose how its displayed on the front end.

The drag and drop works and places the content correctly on the front end of the site, however the content disappears from CKEditor.

It's not deleting it just hiding it from view, and on inspection it appears the html, head, and body tags from CKEditor are being emptied.

Anyone experienced this before or know why?

Thanks

Answer 1

I was having this same problem and noticed that ckeditor uses an iframe for display of the formatted text. It seems that Iframes interfere with the jquery drag and drop code (they are intercepting events as well, is my understanding). If you are using the jquery draggable() (and not sortable() or resizable()) then you can use the built-in configuration variable called iframefix, which looks something like:

$( ".selector" ).draggable({ iframeFix: true });

If you are using a sortable (like me) or resizable, you'll have to roll your own fix (or find an existing non-jui one). I'll post the solution here once I get it working. I'm working off of this SO question for starters: Trouble Using JQuery UI.Resizable() and UI.Draggable() with an iFrame,

Answer 2

If you are using draggable + sortable, maybe you want to unload editor and reload it later. This worked for me:

function unloadEditors() {
    $('textarea.editor:hidden').each(function(){
        var tagId = $(this).attr('id');
        CKEDITOR.instances[ tagId ].destroy();
    });
}

function loadEditors() {
    $('textarea.editor:visible').each(function(){
        var tagId = $(this).attr('id');
        CKEDITOR.replace( tagId );
    });
}

$(document).ready(function(){

$( "#blocks" ).sortable({
  revert: true,
  start: function(event,ui){
    unloadEditors();
  },
  stop: function(event,ui){
    loadEditors();
  }
});
});