父组件传props给Quill的value时，quill-image-resize失效问题解决

我用React Quill开发模板编辑器，借助Quill-Image-Resize-Module实现图片缩放，原本功能正常，但把HTML和setHTML提升到父组件作为props传入后，其他功能都正常，唯独图片缩放失效。

代码如下：

import React from "react";
import ReactQuill, { Quill }from "react-quill";
import ImageResize from 'quill-image-resize-module-react';
import "react-quill/dist/quill.snow.css";

const Block = Quill.import("blots/block");

Block.tagName = "DIV";

Quill.register(Block, true);
Quill.register('modules/imageResize', ImageResize);

const keyboardBindings = {
  linebreak: {
    key: 13,
    handler: function (range, _context) {
      this.quill.clipboard.dangerouslyPasteHTML(
        range.index,
        "<p><br/></p>"
      );
    }
  }
};

const modules = {
  toolbar: [
    ["bold", "italic", "underline", "header", "image", "code-block"], 
    [{ list: "ordered" },{ list: "bullet" }],
    [{ header: [1, 2, false] }],
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],  
  ],
  keyboard: {
    bindings: keyboardBindings
  },
  imageResize: {
    parchment: Quill.import('parchment'),
    modules: ['Resize', 'DisplaySize', 'Toolbar']
  }
};
const formats = [
  "bold", "italic", "underline", "list", "bullet", "header", "image", "code-block"
];

function Editor({HTML, setHTML, setText}) {

  const handleChange = (content, _delta, _source, editor) => {
    const html = content ? content.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/, "") : "";
    const text = editor.getText(html);
    setHTML && setHTML(html);
    setText && setText(text);
  }
  return (
    <ReactQuill
      className="ql-editor"
      style={{ height: "600px", overflow: "auto" }}
      theme="snow"
      modules={modules}
      formats={formats}
      value={HTML}
      onChange={handleChange}
    />
  );
}


export default Editor;

原因分析 #

1. HTML处理时清除了图片样式：你在handleChange里用正则把所有元素的style属性都删掉了，包括图片缩放后生成的width/height样式。当父组件把处理后的HTML回传给编辑器时，图片丢失了缩放相关的样式标记，image-resize模块无法识别这些图片需要绑定缩放功能。
2. 内容更新后模块未重新绑定：当父组件的HTML状态更新时，React Quill会重新渲染内容，但image-resize模块只会在编辑器初始化或图片首次插入时绑定事件，不会自动对新传入的HTML中的图片重新绑定监听。

解决方案 #

方案1：修复HTML处理逻辑，保留图片样式 #

修改handleChange中的正则，只清除非图片元素的style，保留图片的缩放样式：

const handleChange = (content, _delta, _source, editor) => {
  // 只移除非img标签的style属性
  const html = content ? content.replace(/(<(?!img)[^>]+)style\s*?=\s*?(['"])[\s\S]*?\2/gi, '$1') : "";
  const text = editor.getText();
  setHTML && setHTML(html);
  setText && setText(text);
};

另外注意editor.getText()不需要传html参数，直接调用就能获取纯文本内容。

方案2：监听HTML变化，手动绑定图片缩放 #

通过useRef获取Quill实例，在HTML更新时手动给所有图片绑定image-resize模块：

import React, { useRef, useEffect } from "react";
// ... 其他导入

function Editor({HTML, setHTML, setText}) {
  const quillRef = useRef(null);

  useEffect(() => {
    const quill = quillRef.current?.getEditor();
    if (!quill) return;
    
    const imageResizeModule = quill.getModule('imageResize');
    if (!imageResizeModule) return;

    // 给所有图片重新绑定缩放功能
    const images = quill.root.querySelectorAll('img');
    images.forEach(img => {
      imageResizeModule.attach(img);
    });
  }, [HTML]);

  const handleChange = (content, _delta, _source, editor) => {
    // 用方案1中的修复后的HTML处理逻辑
    const html = content ? content.replace(/(<(?!img)[^>]+)style\s*?=\s*?(['"])[\s\S]*?\2/gi, '$1') : "";
    const text = editor.getText();
    setHTML && setHTML(html);
    setText && setText(text);
  }

  return (
    <ReactQuill
      ref={quillRef} // 添加ref
      className="ql-editor"
      style={{ height: "600px", overflow: "auto" }}
      theme="snow"
      modules={modules}
      formats={formats}
      value={HTML}
      onChange={handleChange}
    />
  );
}

方案3：避免不必要的HTML全局替换（可选） #

如果你的需求只是清除特定样式（比如文字的背景色、颜色），可以更精准地处理，比如只移除color和background相关的样式，而不是整个style属性：

const html = content ? content.replace(/style\s*?=\s*?(['"])(.*?)(color:[^;]+;)?(background:[^;]+;)?(.*?)\1/gi, (match, quote, p1, color, bg, p2) => {
  let newStyle = [p1, p2].filter(Boolean).join(';');
  return newStyle ? `style=${quote}${newStyle}${quote}` : '';
}) : "";

内容的提问来源于stack exchange，提问作者HubertBlu