React中自定义Jodit Editor本地图片上传流程改造求助

需求说明 #

需修改React项目中Jodit Editor的本地图片上传逻辑，后端要求向http://localhost:3000/files发送包含图片的formData POST请求，成功后返回图片访问URL，需将该URL插入编辑器。

解决方案 #

核心是通过配置Jodit的uploader选项自定义上传逻辑，具体步骤如下：

• 导入axios用于发送HTTP请求
• 在Jodit配置中修改uploader对象，禁用base64直接插入图片的行为
• 实现自定义上传方法，对接后端接口并将返回的图片URL插入编辑器

修改后的完整代码 #

import JoditEditor from 'jodit-react'
import { useEffect, useRef } from 'react'
import axios from 'axios' // 新增导入axios

function JoditComponent({ article, updateArticle }) {
    const editorRef = useRef(null)

    useEffect(() => {
        console.log(article, updateArticle)
    }, [article, updateArticle])

    const config = {
        zIndex: 0,
        readonly: false,
        activeButtonsInReadOnly: ['source', 'fullsize', 'print', 'about'],
        toolbarButtonSize: 'middle',
        theme: 'default',
        enableDragAndDropFileToEditor: true,
        saveModeInCookie: false,
        spellcheck: true,
        editorCssClass: false,
        triggerChangeEvent: true,
        height: 450,
        direction: 'ltr',
        language: 'pt_BR',
        debugLanguage: false,
        i18n: 'en',
        tabIndex: -1,
        toolbar: true,
        enter: 'P',
        useSplitMode: false,
        colorPickerDefaultTab: 'background',
        imageDefaultWidth: 100,
        removeButtons: ['about', 'print', 'file'],
        disablePlugins: ['paste', 'stat'],
        events: {},
        textIcons: false,
        // 重点配置自定义上传器
        uploader: {
            insertImageAsBase64: false, // 禁用base64本地插入，改为上传到后端
            async upload(file, success, error) {
                try {
                    const formData = new FormData()
                    formData.append('file', file)

                    const response = await axios.post('http://localhost:3000/files', formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data',
                        },
                    })
                    // 上传成功后，将后端返回的图片URL传入success回调，Jodit会自动插入图片
                    success(response.data)
                } catch (err) {
                    // 上传失败时触发错误回调
                    error(err)
                    console.error('图片上传失败:', err)
                }
            }
        },
        placeholder: '',
        showXPathInStatusbar: false,
    }

    return (
        <div>
            <JoditEditor
                id='article-content'
                value={article.content}
                ref={editorRef}
                config={config}
                tabIndex={1}
                onChange={(newContent) =>
                    updateArticle({
                        type: 'field',
                        field: 'content',
                        value: newContent,
                    })
                }
            />
        </div>
    )
}

export default JoditComponent

关键代码说明 #

• insertImageAsBase64: false：告知Jodit不将图片转为base64直接插入，而是执行自定义上传逻辑
• upload方法：接收三个参数，file为选中的图片文件，success是上传成功后的回调（需传入图片URL），error是上传失败的回调
• 上传逻辑与提供的预览组件完全对齐，通过axios发送formData请求，成功后调用success方法将URL传入Jodit，编辑器会自动完成图片插入操作

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