React-Quill插入文本报错：quillRef.getSelection is not a function

问题根源 #

1. 实例对象拿错了：你用editorRef.current拿到的是ReactQuill的组件包装实例，不是Quill编辑器的核心实例，自然没有getSelection这类原生方法，得通过getEditor()才能拿到真正的Quill对象。
2. 事件绑定写法错误：你写的onClick={insertText(editorRef.current)}会在组件渲染时就直接执行insertText，这时候编辑器可能还没初始化，editorRef.current甚至可能是undefined，点击按钮时反而没触发正确逻辑。

修复后的代码 #

import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import { useRef } from "react";

const YourComponent = () => {
  const editorRef = useRef();

  const insertText = () => {
    // 先获取真正的Quill编辑器实例
    const quillInstance = editorRef.current?.getEditor();
    if (!quillInstance) return;

    const range = quillInstance.getSelection();
    const position = range ? range.index : 0;
    quillInstance.insertText(position, "Hello, World! ");
  };

  return (
    <>
      {/* onClick直接传函数，不要立即执行 */}
      <Button onClick={insertText}>Add Text</Button>
      <ReactQuill
        ref={editorRef}
        name="format"
        id="text-area"
        theme="snow"
        value={values.format}
        // 受控组件记得加上onChange同步状态
        onChange={(newValue) => {/* 这里写更新values.format的逻辑 */}}
      />
    </>
  );
};

额外提示 #

• 用?.可选链操作符可以避免编辑器未初始化时调用getEditor()报错。
• ReactQuill是受控组件，插入文本后需要手动同步状态到values.format，否则组件值会和编辑器内容不一致。

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