react使用react-quill 富文本插件、加入handlers富文本不显示解决办法

初遇你时动了情2025-02-25 8:43

可以调整图片大小

quill-image-resize-module-react

复制代码

加入插件quill-image-resize-module-react

Quill.register("modules/imageResize", ImageResize); // 注册图片缩放


富文本配置中加入如下
 const quildConfig = {
    toolbar: {
      container: [
        ["bold", "italic", "underline", "strike", "divisionLine"],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ["clean"],
        [{ size: ["small", false, "large", "huge"] }],
        [{ color: [] }], //y颜色
        ["image"],
        ["horizontalRule"], // 分隔线按钮
      ],
      
    },
    imageResize: {
      // 调整图片尺寸
      displayStyles: {
        border: "none",
      },
      modules: ["Resize", "DisplaySize", "Toolbar"],
    },
    
    // modules:{
    //   imageResize: true,
    // }
  };

加入handlers富文本不显示、浏览器也没有报错

复制代码

// 富文本 配置
加入这个就可以 useMemo

  const quildConfig = useMemo(()=>{
    return {
      toolbar: {
        container: [
          ["bold", "italic", "underline", "strike", "divisionLine"],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          ["clean"],
          [{ size: ["small", false, "large", "huge"] }],
          [{ color: [] }], //y颜色
          ["image"],
          ["horizontalRule"], // 分隔线按钮
        ],
        handlers: {
          image: ()=>{
            console.log("啊哈哈哈---")
          }, // 自定义图片上传逻辑
        },
      },
      // image: {
      //   // 禁用 Base64 图片
      //   urlEnabled: false,
      // },
      imageResize: {
        // 调整图片尺寸
        displayStyles: {
          border: "none",
        },
        modules: ["Resize", "DisplaySize", "Toolbar"],
      },
      
      // modules:{
      //   imageResize: true,
      // }
    };
  },[])