如何在React Quill编辑器光标位置插入图片（调用外部API）

现有代码 #

PageEdit 组件 #

import React,{useState} from 'react';
import TextEditor from '../common/TextEditor';

function PageEdit(props) {
    const [value, setValue] = useState('This is the value intially');

    console.log("value", value)

    return (
        <div className='horizontal--center' style={{width:"50vw"}}>
          
            <TextEditor value={value} setValue={setValue}/>
        </div>
    );
}

export default PageEdit;

TextEditor 组件 #

import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function TextEditor({value, setValue}) {
    const modules = {
        toolbar: [["bold", "italic", "image"]],
    }
    
    return (
     <ReactQuill theme="snow" value={value} onChange={setValue} modules={modules} />
    );
}

export default TextEditor;

实现方案 #

要实现点击按钮调用外部API，并在光标活跃位置插入图片，核心是获取Quill编辑器实例，再利用Quill原生API操作光标和插入内容，具体步骤如下：

1. 保存Quill实例引用：通过useRef获取ReactQuill组件的底层Quill实例，这是操作编辑器的基础。
2. 添加自定义触发按钮：在编辑器上方添加按钮，点击时发起API请求获取图片地址。
3. 插入图片到光标位置：拿到API返回的图片URL后，调用Quill的insertEmbed方法在当前光标位置插入图片。

修改后的TextEditor组件代码：

import React, { useRef } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function TextEditor({value, setValue}) {
    const quillRef = useRef(null);

    const modules = {
        toolbar: [["bold", "italic", "image"]],
    }

    const fetchAndInsertImage = async () => {
        try {
            // 替换为你的外部API地址
            const response = await fetch('https://your-image-api-endpoint');
            const data = await response.json();
            const imageUrl = data.imageUrl; // 假设API返回包含图片URL的字段

            const quill = quillRef.current?.getEditor();
            if (!quill) return;

            // 获取当前光标选择范围
            const range = quill.getSelection();
            if (range) {
                // 在光标位置插入图片
                quill.insertEmbed(range.index, 'image', imageUrl);
                // 将光标移动到图片后方，方便继续编辑
                quill.setSelection(range.index + 1);
            }
        } catch (err) {
            console.error('插入图片失败:', err);
        }
    };

    return (
        <div>
            <button onClick={fetchAndInsertImage}>从API插入图片</button>
            <ReactQuill 
                theme="snow" 
                value={value} 
                onChange={setValue} 
                modules={modules} 
                ref={quillRef}
            />
        </div>
    );
}

export default TextEditor;

关键说明 #

• quill.getSelection()：获取当前光标位置或选中区域，确保图片插入到用户期望的位置。
• quill.insertEmbed(index, type, value)：Quill核心插入API，这里type指定为image，value传入图片的URL。
• 若API需要请求头、参数等，可在fetch中添加对应配置（如headers、body）。

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