tinyMCE callback handler on image drag&drop

Question

tinyMCE supports dragging images from a website (not local file browser) to the rich text editor field. They get converted to and <img src=''>...</img> tag and are immediately displayed as images.

I would like to change the src url of the image tag when it is inserted that way. I tried using the urlconverter_callback handler and the paste_preprocess handler from the paste plugin but neither of them get triggered when I drop the image to the editor field.

Which callback can I use to react on an image drag&drop to the editor? Or is there another way to change the image src when it's dropped?

(urlconverter_callback works when I add the image with the 'Insert Image' button but that's not what I'm looking for.)

Answer 1

The key relies on what's already told: Drag-n-Drop events belong to the browser domain, so TinyMCE knows nothing about them unless we bind them, which in this case it's not necessary.

It's also important to have in mind the way Drag-n-Drop interactions share information between the different events: reading and writting the dataTransfer property via getData and setData functions.

That said, this is my aproach (note I'm using jquery for selection and event binding):

Bind the dragstart event to the image, so it fires when we start the interaction. Make the string replacement and store the result on dataTransfer.

https://gist.github.com/3040473

Useful links:

• http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
• https://developer.mozilla.org/En/DragDrop/Drag_and_Drop