tinyMCE回调处理程序对图像拖放 [英] tinyMCE callback handler on image drag&drop
问题描述
tinyMCE支持将图片从网站（非本地文件浏览器）拖动到富文本编辑器字段。它们被转换为< img src =''> ...< / img> 标签，并立即显示为图像。
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.
我想更改图像标记的 src 网址。我尝试使用粘贴插件中的 urlconverter_callback 处理程序和 paste_preprocess 处理程序，但是当我删除
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 在我添加图片时工作插入图片按钮，但这不是我要找的。）
(urlconverter_callback works when I add the image with the 'Insert Image' button but that's not what I'm looking for.)
推荐答案
关键在于什么已经告诉：Drag-n-Drop事件属于浏览器域，因此TinyMCE不了解它们，除非我们绑定它们，在这种情况下它不是必需的。
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.
记住Drag-n-Drop交互在不同事件之间共享信息的方式：通过 getData 和 setData 读取和写入 dataTransfer 函数。
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.
也就是说，这是我的aproach（注意我使用jquery选择和事件绑定）：
That said, this is my aproach (note I'm using jquery for selection and event binding):
将 dragstart 事件绑定到图片，因此在我们开始互动时会触发。将字符串替换并将结果存储在dataTransfer上。
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
有用的链接：
- http：// www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
- https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
- http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
- https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
这篇关于tinyMCE回调处理程序对图像拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
