如何在粘贴事件中获取带有文本的图像答案

【问题标题】：how to get an image with text on paste event如何在粘贴事件中获取带有文本的图像
【发布时间】：2022-02-16 01:52:24
【问题描述】：

我在获取已与用户一起粘贴和复制的图像以及一些文本时遇到问题，我的粘贴功能如下。

const PasteFunction = (event) => {
  let paste = (event.clipboardData || window.clipboardData).getData("text");
  if (
    paste.includes("svg") ||
    paste.includes("jpg") ||
    paste.includes("jpeg") ||
    paste.includes("gif") ||
    paste.includes("pdf") ||
    paste.includes("tiff") ||
    paste.includes("raw") ||
    paste.includes("png") ||
    paste === "" ||
    paste === undefined ||
    paste === null
  ) {
    event.preventDefault();
    return;
  }
  var text = (event.originalEvent || event).clipboardData.getData(
    "text/html"
  );
  document.execCommand("insertHTML", true, text);
};

目前发生的情况是，如果用户只复制图像，我会阻止它被粘贴到我的 RichContentText 中，但如果用户决定复制带有部分文本的图像，我目前拥有的这段代码无法识别这个文本有一个图像，并让它自动传递......如果我试图阻止的话。

所以只要有文本，在剪贴板数据中它就会粘贴它，即使它在该数据中是否有图像......有谁知道我怎么能找到它？

示例如果用户决定将其与图像一起复制，我想阻止用户粘贴我在下面显示的图像的内容

【问题讨论】：

你能用DOMParser把粘贴的内容转成DOM吗？ developer.mozilla.org/en-US/docs/Web/API/DOMParser/…。您可以在粘贴的 DOM 中搜索元素类型。
是的，谢谢你的建议，我使用了解析器
酷，很高兴我能帮上忙。

标签： javascript html reactjs

【解决方案1】：

我根据“first last”告诉我的内容更改我的粘贴功能：

const PasteFunction = (event) => {
  var text = (event.originalEvent || event).clipboardData.getData(
    "text/html"
  );
  const parser = new DOMParser();
  const doc = parser.parseFromString(text, "text/html");
  var image = doc.querySelector("img");
  if (image) {
    event.preventDefault();
    return;
  }
  document.execCommand("insertHTML", true, text);
};

【讨论】：