CODEWITHSUNDEEP
jqueryajaxckeditorjquery-ui-draggable
Brob
Brob

Reputation: 675

CKEDITOR and jquery drag and drop makes content disappear

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

Upvotes: 5

Views: 5603

Answers (3)

texelate
texelate

Reputation: 2498

As has been mentioned it is the fact that the editor is in an iframe that causes the issue.

A fix that is independent regardless of the drag-and-drop library you are using is to make CKEditor load in a div rather than a iframe. All you need to to is load this plugin:

https://ckeditor.com/cke4/addon/divarea

Then simply add it to your editor's plugin config:

config.extraPlugins  = 'divarea';  // If it's the only plugin you're using
config.extraPlugins += ',divarea'; // To add it on to existing plugins

Upvotes: 2

jhvaras
jhvaras

Reputation: 2124

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

Upvotes: 2

Nick
Nick

Reputation: 341

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,

Upvotes: 2

Related Questions