React-Quill自定义图片处理器导致编辑器无法渲染问题求助

问题根源分析 #

1. 缺失React Hooks导入：代码中使用useRef和useState但未从React导入，直接触发运行时错误。
2. 编辑器值绑定逻辑错误：用defaultValue而非value绑定状态，导致状态更新无法同步到编辑器；同时初始状态为空字符串，与后续存储的Delta对象类型不匹配。
3. Quill API调用错误：自定义图片handler中错误调用quill.editor.insertEmbed，正确方式是直接调用Quill实例的insertEmbed方法。

修复后的完整代码 #

import React, { useState, useRef } from 'react'; // 补上缺失的Hooks导入
import ReactQuill from "react-quill";
import Quill from "quill";
import "react-quill/dist/quill.snow.css";

const AddPrice = () => {
  const quillRef = useRef(null);
  const [body, setBody] = useState(null); // 初始值设为null，匹配Delta类型

  const toolbarOptions = {
    toolbar: {
      container: [
        ["bold", "italic", "underline", "strike"],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ align: [] }],
        [{ color: [] }, { background: [] }],
        ["image"],
        ["clean"],
      ],
      handlers: {
        image: () => {
          const input = document.createElement("input");
          input.setAttribute("type", "file");
          input.setAttribute("accept", "image/*");
          input.click();
          input.onchange = async () => {
            const file = input.files[0];
            if (!file) return; // 增加空值判断，避免无文件时出错
            
            const formData = new FormData();
            formData.append("image", file);
            
            try {
              const response = await fetch("http://localhost:5000/api/upload", {
                method: "POST",
                body: formData,
                credentials: "include",
              });
              
              if (!response.ok) throw new Error('上传失败');
              
              const data = await response.json();
              const quill = quillRef.current.getEditor();
              const range = quill.getSelection();
              
              if (!range) return; // 确保有选中范围再插入
              
              // 直接调用Quill实例的insertEmbed，移除多余的.editor属性
              quill.insertEmbed(
                range.index,
                "image",
                data.link,
                Quill.sources.USER
              );
              quill.setSelection(range.index + 1, Quill.sources.SILENT);
            } catch (err) {
              console.error('图片上传出错:', err);
              // 可在此添加用户提示，比如弹窗告知上传失败
            }
          };
        },
      },
    },
  };

  const handleChange = (content, delta, source, editor) => {
    setBody(editor.getContents()); // 存储Delta对象
  };

  return (
    <div id="container" className="w-full overflow-auto">
      <label className="flex flex-col">
        <p className="text-sm font-light">Descriere:</p>
        <ReactQuill
          theme="snow"
          ref={quillRef}
          modules={toolbarOptions}
          value={body} // 用value替代defaultValue，实现状态双向绑定
          onChange={handleChange}
        />
      </label>
    </div>
  );
};

export default AddPrice; // 确保组件正常导出

额外说明 #

• 关于DOMNodeInserted警告：该警告来自Quill内部使用的旧DOM监听API，属于框架层面的历史遗留问题，不影响核心功能。若想消除，可尝试升级React-Quill和Quill到最新稳定版本，新版本大概率已改用MutationObserver优化。
• 错误处理增强：新增文件空值判断、请求异常捕获，避免单个步骤失败导致整个编辑器崩溃。

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