可编辑的div黏贴图片

黏贴图片主要分为2个情况，第一个是直接截图或者打开图片后点击复制，第二个是直接使用ctrl+c复制电脑本地图片，今天主要是写一下ctrl+c复制电脑本地图片的方法

通过使用ctrl+c复制电脑本地图片 在粘贴板里面是保存的file文件类型 所以直接ctrl+v 是无法复制出来，这就需要我们将file类型的img 转化成blob类型，具体方法如下。将此函数绑定到 onPaste 黏贴事件

   const getItem = async (event) => {
    let items = event.clipboardData && event.clipboardData.items;
    let file = null;
    const selection = window.getSelection();
    let paste = (event.clipboardData || window.clipboardData).getData('text');
    selection.deleteFromDocument();
    if (items && items.length) {
      let filterItem = items;
      // 检索剪切板items
      for (let i = 0; i < filterItem.length; i++) {
        if (filterItem[i].type.indexOf('image') !== -1) {
          file = filterItem[i].getAsFile();
          let blob = new Blob([file], { type: 'image/png' || 'application/*' });
          document.execCommand('insertImage', 'false', URL.createObjectURL(blob));
        } else {
          if (filterItem[i].type.indexOf('text/html') !== -1) {
            document.execCommand('insertText', 'false', paste);
          }
        }
      }
    }
  };

第二个方法使用 window.getSelection.此方法是标准中推荐的方法

  //获取当前黏贴dom 内容
  const getItem = async (event) => {
    let items = event.clipboardData && event.clipboardData.items;
    let file = null;
    const selection = window.getSelection();
    let paste = (event.clipboardData || window.clipboardData).getData('text');
    selection.deleteFromDocument();
    if (items && items.length) {
      let filterItem = items;
      // 检索剪切板items
      for (let i = 0; i < filterItem.length; i++) {
        if (filterItem[i].type.indexOf('image') !== -1) {
          file = filterItem[i].getAsFile();
          let blob = new Blob([file], { type: 'image/png' || 'application/*' });
          let fragment = selection.getRangeAt(0).createContextualFragment(`<img src=${URL.createObjectURL(blob)} />`);
           selection.getRangeAt(0).insertNode(fragment.lastChild);
        } else {
          if (filterItem[i].type.indexOf('text/html') !== -1) {
             selection.getRangeAt(0).insertNode(document.createTextNode(paste));
          }
        }
      }
    }
  };