Compose HTML Paste in Javascript-CodePudding

I'm using an HTML DIV in Content Editable mode. From Javascript, given a valid image URL in a string, how can I convert that into something that I can push onto the clipboard so that when I paste into the Content Editable DIV with CTRL V keystroke, it pastes the image itself and not the plain text string?

CodePudding user response：

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)
}