Next.js+ReactQuill插入图片报错：getEditor is not a function

问题背景 #

使用Next.js（13）、React（18）、Apollo Client和ReactQuill搭建文章编辑页面，需求是允许用户在编辑器中插入图片，上传至服务器后在编辑器内显示。但调用quillRef.current.getEditor()获取Quill实例时，出现错误：

TypeError: _quillRef$current.getEditor is not a function

导致图片上传后无法在编辑器中显示。

已尝试方案 #

• 通过ref直接调用getEditor()获取Quill实例，提示该方法未定义
• 使用Next.js动态导入ReactQuill并禁用SSR，问题仍存在
• 添加useEffect检查quillRef.current是否为null，未解决报错

解决方案 #

ReactQuill v2.x版本后，组件的ref直接指向Quill编辑器实例，不再需要调用getEditor()方法。修改代码中获取实例的逻辑即可解决问题，同时需增加实例和选区的空值判断，避免潜在报错。

修改后的完整代码 #

import dynamic from "next/dynamic";
import { useRef, useState } from "react";

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

export default function Write() {
  const quillRef = useRef(null);
  const [content, setContent] = useState("");

  const imageHandler = () => {
    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("file", file);

      try {
        const response = await fetch("http://localhost:4000/api/upload", {
          method: "POST",
          body: formData,
        });
        const data = await response.json();

        // 直接通过ref.current获取Quill实例
        const quill = quillRef.current;
        if (!quill) return;

        // 获取当前选区，若未选中则默认插入到末尾
        const range = quill.getSelection();
        const insertIndex = range ? range.index : quill.getLength() - 1;

        quill.insertEmbed(insertIndex, "image", data.url);
        // 插入后将光标移动到图片后方
        quill.setSelection(insertIndex + 1);
      } catch (error) {
        console.error("图片上传失败:", error);
      }
    };
  };

  const modules = {
    toolbar: {
      handlers: { image: imageHandler },
    },
  };

  return (
    <ReactQuill
      ref={quillRef}
      value={content}
      onChange={setContent}
      modules={modules}
      theme="snow"
    />
  );
}

关键修改点 #

1. 移除getEditor()调用：将const quill = quillRef.current.getEditor();改为const quill = quillRef.current;
2. 增加空值判断：检查quill实例是否存在，避免未初始化时调用方法
3. 处理选区为空的情况：若用户未选中任何区域，默认将图片插入到内容末尾
4. 优化光标位置：插入图片后将光标移动到图片后方，提升编辑体验

验证要点 #

• 确认ReactQuill版本为v2.x及以上（可查看package.json中的版本号）
• 确保后端/api/upload接口返回正确的图片访问URL
• 检查上传接口的跨域配置，避免请求失败

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