使用JavaScript从剪贴板粘贴图像
我们如何将剪贴板中的图像粘贴到使用javascript的自定义富文本编辑器中? (ctrl + c和ctrl + v或快照)。
有没有人使用Ajax的富文本编辑器? 将剪贴板中的图像粘贴到Ajax RTE的工作?
请分享你的想法!
谢谢!
因为这个问题还经常出现在Google的search结果中,所以我想指出,今天至less在Google Chrome中是可以的。 他们实现了它在GMail中使用,但它可用于所有网站。
Gmail和Google Chrome 12+如何在剪贴板function中使用粘贴图片?
在Chrome和Firefox中,这绝对是可能的。 我不太确定IE / Safari。
看imgur.com,onpaste和pasteboard.co作为例子,并看到在github上的粘贴板的代码,以及Joel在他的博客上的优秀写作
为了logging,您需要用户在您的元素上按下Ctrl + V,然后通过从event.clipboardData
读取数据来捕获粘贴事件处理程序中的数据,但要使其工作在较低级别,则需要确保焦点是在一个空的contenteditable元素,并从那里拉动的结果,这在Firefox 22中不好。看到这里
新的浏览器,如Firefox 4,支持将图像数据从剪贴板粘贴到RTE中,作为带有编码PNG数据的数据URI 。 但是,大多数Web应用程序错误地parsing这些数据URI并丢弃它。 雅虎邮件正确处理。 但Gmail和Hotmail放弃它。 我已经通知谷歌和微软这件事。
现在我find了clipboardData对象 。
但它只能从剪贴板中检索文本格式或URL。 clipboardData
只是IE浏览器,它与string一起工作,如果粘贴图像,则返回null。
一个testing例子
<form> <input type="text" id="context" onClick="paste();"> </form> <script type="text/javascript"> function paste() { var sRetrieveData = clipboardData.getData("Text"); document.getElementById('context').value = sRetrieveData; } </script>
默认情况下,Firefox上没有启用剪贴板访问, 这里的解释。 另一方面, execCommand()只处理文本值,不符合Firefox。
像其他人说的那样,代码在IE上工作的事实是一个安全风险,任何站点都可以访问您的剪贴板文本。
复制图像相对URL最简单的方法是使用java applet,windows activeX插件, .net代码或拖放它。
不幸的是,无法将剪贴板中的图像粘贴到RTE。
如果从包含图像和文本的Microsoft Word等桌面应用程序中复制一个Blob,则该图像将变成一个断开的引用(尽pipe比例是正确的),并且文本将被正确粘贴(格式将会丢失) 。
唯一可能的是在RTE中复制图像并将其粘贴回RTE中。
截至前一段时间:
我不认为这是可能的。
你可能会粘贴文件名,但你真的需要图像的完整path。 您实际上需要将图像从用户的系统上传到服务器。
JavaScript剪贴板访问是一个安全风险,如果你(错误地)认为你需要它,你可能需要回到你的devise…