How can I listen for the drag/drop event in CKeditor?

0
votes

I'm building an application that requires the user to drag and drop html elements onto a CKeditor instance. I need to listen for the drop event so I can take action to remove the element that was dropped onto the editor. I see that there's a 'paste' event, but it's not triggered by the drop.

Here's my simple test, using the CKeditor jquery adapter:

// set up instance
$('#editor1').ckeditor();
var editor = $('#editor1').ckeditorGet();

// this gets a list of all events that you can listen for
console.log(editor._.events);

// here's how you listen for an event
editor.on("someEvent", function(e) {
  console.log(e); 
});

I can't find anything in the documentation to shed light on this.

Any ideas?

2
javascriptdrag-and-dropckeditor
did you have any luck with this? I am trying to do the same thing now. – joshs
No, no luck. I went down a different path. – ScottE

2 Answers

0
votes

If possible, assign a unique attribute to the items you're dropping into the editor, then listen for selectionChange

editor.on('selectionChange', hookNewObjects);

Keep a register of all the objects you've already dropped and take action on new ones only.

You can access the recently dragged element using

ev.editor.getSelection().getStartElement().$