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.)
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 <strong>dataTransfer</strong> property via <strong>getData</strong> and <strong>setData</strong> functions.
That said, this is my aproach (note I'm using jquery for selection and event binding):
Bind the <strong>dragstart</strong> event to the image, so it fires when we start the interaction. Make the string replacement and store the result on dataTransfer.
<a href="https://gist.github.com/3040473" rel="nofollow">https://gist.github.com/3040473</a>
Useful links:<ul><li><a href="http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/" rel="nofollow">http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/</a></li> <li><a href="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop" rel="nofollow">https://developer.mozilla.org/En/DragDrop/Drag_and_Drop</a></li> </ul>