Javascript 如何同时获取文本+；在剪贴板中复制的图像

我使用MS-WORD将内容复制到富编辑器。 我需要使用从MS-WORD文件（通过CTRL+a）复制到编辑器（通过CTRL+V）中的文本+图像

为了实现这一目标，我正在使用以下代码：

    function handlePaste (e) {
        var clipboardData, pastedData;

        // Stop data actually being pasted into div
        e.stopPropagation();
    e.preventDefault();

        // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;

    pastedData = clipboardData.getData('Text');

    // Do whatever with pasteddata
    alert(pastedData);
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

这段代码的问题是，我只从剪贴板中获取文本。 以下是截图：

正如你所看到的，我只是从word文件中复制了文本，而不是图像

是否有任何解决方案可以同时捕获剪贴板中的图像和文本

现在我正在使用Chrome来检查这个功能

以下是相同的JSFIDLE：

---

当用户复制/粘贴文本+图像时，剪贴板数据中没有文件实体。文件实体仅在单个文件复制/粘贴时激活

要解决这个问题，我们需要：

• 阅读

  text/html

  数据，并：
  • 在

    text/html

    中查找img元素并存储它们（例如，命名为

    htmlImages

    ）
• 读取包含图像十六进制源的

  text/rtf

  数据，然后：
  • 通过匹配

    \\pngblip

    和

    \\jpegblip

    查找图像实体，并将它们转换为数据URL列表（例如，命名为

    数据URL

    ）：
    • 获取图像类型
    • 获取十六进制源字符串
    • 将十六进制转换为base64字符串
    • 将图像类型和base64字符串组合为dataurl字符串
      • 您还可以实现其他处理程序，将base64字符串转换为blob或将图像内容上载到云
• 将

  htmlImages

  中元素的

  src

  属性替换为

  dataurl

  • 仅替换以“file://”开头的

    src

---

当用户复制/粘贴文本+图像时，剪贴板数据中没有文件实体。文件实体仅在单个文件复制/粘贴时激活

要解决这个问题，我们需要：

• 阅读

  text/html

  数据，并：
  • 在

    text/html

    中查找img元素并存储它们（例如，命名为

    htmlImages

    ）
• 读取包含图像十六进制源的

  text/rtf

  数据，然后：
  • 通过匹配

    \\pngblip

    和

    \\jpegblip

    查找图像实体，并将它们转换为数据URL列表（例如，命名为

    数据URL

    ）：
    • 获取图像类型
    • 获取十六进制源字符串
    • 将十六进制转换为base64字符串
    • 将图像类型和base64字符串组合为dataurl字符串
      • 您还可以实现其他处理程序，将base64字符串转换为blob或将图像内容上载到云
• 将

  htmlImages

  中元素的

  src

  属性替换为

  dataurl

  • 仅替换以“file://”开头的

    src

---

嘿，我知道这是一个老问题，但是你介意发布

clipboardata

序列化，即使用JSON.stringify吗？嘿，我知道这是一个老问题，但是你介意发布

clipboardata

序列化，即使用JSON.stringify吗？