【UEditor富文本框】 React图片复制功能

支持图片复制

  /**
   * URL转base64
   * @param url String 图片链接
   * @callback Function 获取base64格式后的回调函数
   */
function getImgToBase64(url, width, height, callback) {
  let canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  const img = new Image(); //通过构造函数绘制图片实例
  img.crossOrigin = "Anonymous"; //处理图片跨域问题
  img.onload = function () {
    //该加载过程为异步事件，请先确保获取完整图片
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(img, 0, 0, width, height); //将图片绘制在canvas中,图片压缩
    } else {
      context.drawImage(img, 0, 0);
    }
    const URLData = canvas.toDataURL("image/png");
    callback(URLData);
    canvas = null;
  };
  img.onerror = function () {
    callback("");
    canvas = null;
  };
  img.src = url;
}


const copyElementToClipboard = (element) => {
  window.getSelection().removeAllRanges();
  const range = document.createRange();
  range.selectNode(
    typeof element === "string" ? document.getElementById(element) : element
  );
  window.getSelection().addRange(range);
  document.execCommand("copy");
  window.getSelection().removeAllRanges();
};


const clipboardHandler = (event) => {
    const target = event.target || event.srcElement;
    const type = target.nodeName;
    switch (type) {
      case "IMG":
        getImgToBase64(target.src, target.width, target.height, (data) => {
          // 只能是ClipboardItempng格式，但可以复制JPG
          if (data) {
            const blob = base64ToBlob(data, "image/png");
            const item = new window.ClipboardItem({ "image/png": blob });
            if (navigator.clipboard) {
              navigator.clipboard.write([item]);
            }
          }
        });
        break;
      default:
        copyElementToClipboard(target);
        break;
    }
  };


editor.document.addEventListener("copy", (e) => {
    clipboardHandler(e);
});