本地图文直接复制到富文本编辑器中

在使用 braft-editor 时,发现如果复制一段文字+图片的信息,在粘贴到富文本编辑器中时,只有文本被成功粘贴了,图片会丢失。但是单独复制一张图片是能够成功的。可以在在线编辑器上试试看。

起初我以为是编辑器的问题,所以在知乎、豆瓣日记的编辑器上都尝试了一番 ---- 原来也都不支持啊。于是我就想有没有什么黑科技可以实现,比如获取剪贴板内容,得到 <img> 标签,然后在编辑器 onFocus 的时候触发 uploadFn 上传图片。后来发现,是在下天真了,本以为和复制线上内容一样,能轻松得到一段包含 img 的 html 结构。

其实不然,根本原因是剪贴板里的图片是用 File 对象承载的,所以单单复制一张图片,可以成功粘贴。一旦文字+图片了,就是用 text/html 来获取剪贴板内容,所以是无法粘贴图片的。

在得出这个结论之前,我尝试了以下方法:

  1. 通过 Clipboard.read() 获取:虽然这个接口文档中写的是可以获取到图片,但看起来好像也是不支持图文一起复制的场景,更惨的是…这个接口目前只有 FF 支持:
navigator.clipboard.read().then(data => {
   for (let i=0; i<data.items.length; i++) {
     if (data.items[i].type != "text/plain") {
       alert("Clipboard contains non-text data. Unable to access it.");
     } else {
       textElem.innerText = data.items[i].getAs("text/plain");
     }
   }
 });
  1. 更传统一点的方法是用 e.clipboardData,监听 document 某个事件,然后拿到当前 clipboard 内容,不过要注意这个方法在 IE 下需要用 e.clipboardData('Text'):
if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {

  // Check for 'text/html' in types list. See abligh's answer below for deatils on
  // why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
  // Safari/Edge don't advertise HTML data even if it is available
  types = e.clipboardData.types;
  if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {

    // Extract data and pass it to callback
    pastedData = e.clipboardData.getData('text/html');
    processPaste(editableDiv, pastedData);

    // Stop the data from actually being pasted
    e.stopPropagation();
    e.preventDefault();
    return false;
  }
}
  1. 如果只想粘贴单张图片,可以遍历 e.clipboardData.items,这个方案很成熟了,详见后面的参考资料。

参考资料

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券