如何获取完整Quill API？解决react-quill中getSelection报错问题

问题本质 #

你通过ref绑定拿到的对象，是react-quill库对外封装的组件实例，并非Quill编辑器的原生核心实例。这个封装层仅暴露了value、onChange等和React状态对接的少量方法，原生Quill的核心API（比如getSelection、insertEmbed、deleteText）都没有直接挂在封装层上，因此调用时才会抛出方法不存在的报错，控制台打印时也只能看到有限的几个可用方法。

完整获取Quill API的操作步骤 #

• 第一步：调整ref的绑定逻辑，不要直接把ref对象当做Quill实例使用
  • 给ReactQuill组件绑定的ref，指向的是组件自身实例，而非底层Quill对象。组件实例内置了getEditor()方法，调用这个方法拿到的才是带有全部API的原生Quill实例。
    基础获取逻辑示例：

  import { useRef } from 'react';
  import ReactQuill from 'react-quill';
  import 'react-quill/dist/quill.snow.css';
  
  const Editor = () => {
    // 存储ReactQuill的组件实例引用
    const reactQuillRef = useRef(null);
  
    // 封装取原生Quill实例的通用方法，避免重复做空值判断
    const getNativeQuill = () => reactQuillRef.current?.getEditor();
  
    return (
      <ReactQuill ref={reactQuillRef} />
    )
  }
  

• 第二步：改写原图片上传函数，所有Quill相关API都通过拿到的原生实例调用

  const handleUploadImage = () => {
    const input = document.createElement("input");
    input.setAttribute("type", "file");
    input.setAttribute("accept", "image/*");
    input.click();
  
    input.onchange = async () => {
      // 交互触发时编辑器已经挂载完成，此时可以安全获取原生实例
      const quill = getNativeQuill();
      if (!quill) return;
  
      const file = input.files[0];
      const formData = new FormData();
      formData.append("image", file);
      
      // 以下所有Quill API调用都基于拿到的原生实例，方法可以正常执行
      const range = quill.getSelection(true);
      quill.setSelection(range.index + 1);
      
      const res = await HttpClient().post("/api/blog/images", formData);
      if (res.status === 201) {
        quill.deleteText(range.index, 1);
        quill.insertEmbed(range.index, "image", res.data);
      }
    };
  };
  

• 常见踩坑提示
  • 不要在组件首次同步渲染阶段直接调用getEditor()，这个时机Quill实例还未完成初始化，会返回undefined。建议在用户交互回调、或者编辑器的onInit回调中获取实例。
  • 如果你使用的是react-quill v2及以上版本，封装层已经移除了大部分原生Quill方法的代理转发，必须通过getEditor()取底层实例才能调用核心API，这也是很多人升级版本后突然出现方法不存在报错的核心原因。

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