【UEditor富文本框】React支持图片粘贴

最新推荐文章于 2025-02-18 15:39:26 发布

原创

最新推荐文章于 2025-02-18 15:39:26 发布 · 558 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍了一种富文本编辑器中实现图片粘贴功能的方法，包括对多种图片格式的支持及批量上传处理机制。针对不同数量的图片粘贴情况进行了详细说明，并提供了错误提示和用户体验优化。

支持图片粘贴

  /**
   * 图本粘贴处理
   * @param url String 图片链接
   */
  function pasteWordWithImg(htmlStr, imgArr) {
    let str = htmlStr;
    if (imgArr.length === 1) {
      const { upImgUrl, upWidth, upHeight } = imgArr[0];
      getImgToBase64(
        upImgUrl,
        parseInt(upWidth) + "",
        parseInt(upHeight) + "",
        (data) => {
          if (data) {
            // 只能是ClipboardItempng格式，但可以复制JPG
            const blob = base64ToBlob(data, "image/png");
            const file = new window.File([blob], "image.png", {
              type: blob.type,
            });
            requestUploadImg(file, width, pageHeight).then((res) => {
              str = replaceImgUrl(str, [
                {
                  originUrl: upImgUrl,
                  replaceUrl: res.datas.url,
                },
              ]);
              editor.execCommand("inserthtml", str);
            });
          } else {
            message.error("图片粘贴不成功。试试单独复制原图并用Ctrl+V粘贴");
            str = replaceImgUrl(str, [
              {
                originUrl: upImgUrl,
                replaceUrl: "",
              },
            ]);
            editor.execCommand("inserthtml", str);
          }
        }
      );
    } else if (imgArr.length > 1 && imgArr.length <= 10) {
      let total = 0;
      imgArr.forEach((citem, index) => {
        const { upImgUrl, upWidth, upHeight } = ci