使用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…