101

我们如何使用 javascript 将剪贴板中的图像粘贴到自定义富文本编辑器中？（ctrl+c 和 ctrl+v 或快照）。

有人用过 Ajax 的富文本编辑器吗？将图像从剪贴板粘贴到 Ajax RTE 是否有效？

请分享你的想法！

谢谢！

4

6 回答 6

40

Because this question still often shows up in Google's search results, I want to point out this is possible today, at least in Google Chrome (2011) in all modern browsers (2018). They implemented it to use in GMail, but it is available for all websites.

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

于 2011-10-16T12:20:41.997 回答
18

为了帮助其他人，我将在此处留下由 Nick Rattalack 回答的链接

// window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  for (index in items) {
    var item = items[index];
    if (item.kind === 'file') {
      var blob = item.getAsFile();
      var reader = new FileReader();
      reader.onload = function(event){
        console.log(event.target.result)}; // data url!
      reader.readAsDataURL(blob);
    }
  }
}

剪贴板中的粘贴图像功能如何在 Gmail 和 Google Chrome 12+ 中工作？

于 2018-07-30T02:22:15.043 回答
13

现在在 Chrome 和 Firefox 中这绝对是可能的。我不太确定 IE/Safari。

查看 imgur.com、onpaste 和 pasteboard.co 作为示例，并查看github 上的 pasteboard 代码以及Joel 在他的博客上的出色文章

作为记录，您需要用户在您的元素上按 Ctrl+V，然后您可以通过读取来捕获粘贴event.clipboardData事件处理程序中的数据，但要使其在下层工作，您需要确保焦点位于空contenteditable元素，然后从那里提取结果，这在 Firefox 22 中效果不佳。请参见此处

于 2013-07-09T06:20:35.120 回答
10

现在我找到了剪贴板数据对象。

但它只从剪贴板检索文本格式或 URL。 clipboardData仅适用于 IE，它适用于字符串，如果我们粘贴图像，则返回 null。

一个测试例子

 <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 小程序、windows activeX 插件、.net 代码或拖放它。

于 2009-01-29T09:10:55.310 回答
10

新的浏览器，如 Firefox 4，支持将图像数据从剪贴板粘贴到 RTE，作为带有编码 PNG 数据的数据 URI。但是，大多数 Web 应用程序错误地解析这些数据 URI 并将其丢弃。雅虎邮件正确处理。但是 Gmail 和 Hotmail 会丢弃它。我已就此通知 Google 和 Microsoft。

于 2010-12-09T16:42:51.823 回答
0

不幸的是，无法将剪贴板中的图像粘贴到 RTE。

如果您从包含图像和一些文本的桌面应用程序（如 Microsoft Word）复制 blob，图像将显示为损坏的参考（尽管比例正确）并且文本将正确粘贴（格式将丢失） .

唯一可能的做法是在 RTE 中复制图像并在 RTE 中粘贴回去。

于 2009-01-29T09:35:08.020 回答