撰写 HTML 粘贴到 Javascript

Question

我在内容可编辑模式下使用 HTML DIV。从 Javascript 开始，给定字符串中的有效图像 URL，我如何将其转换为可以推送到剪贴板的内容，以便当我使用 CTRL 粘贴到 Content Editable DIV 时+V 击键，它粘贴图像本身而不是纯文本字符串？

Answer 1

async function writeClipImg(url) {
  try {
    const data = await fetch(url);
    const blob = await data.blob();
    await navigator.clipboard.write([new ClipboardItem({
      [blob.type]: blob
    })]);
    console.log('Fetched image copied.');
  } catch (err) {
    console.error(err.name, err.message);
  }
}
//function from https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem
let text; //get somehow the text of the div
if (text.indexOf('://') != -1) { //check 'https://' (typic url substring) is there at the text
  //only the https care - you can write this for http://, file:///, data etc.
  let link = text.slice(text.indexOf('https://'), text.indexOf(' ', text.indexOf('https://')))
  //its only get the first link
  writeClipImg(link)
}

撰写 HTML 粘贴到 Javascript

Compose HTML Paste in Javascript

html

javascript

clipboard

image

contenteditable