React中Jodit编辑器自定义图片上传配置问题求助

要实现自定义图片上传并插入URL而非Base64，需按以下步骤配置：

1. 修正编辑器配置 #

将insertImageAsBase64URI设为false的同时，必须指定自定义上传函数并配置必要的上传参数，否则编辑器会隐藏上传选项。完整配置如下：

const config = {
  readonly: false,
  height: 400,
  uploader: {
    insertImageAsBase64URI: false, // 禁用Base64插入，启用服务器上传模式
    url: '', // 禁用默认上传接口，使用自定义函数
    upload: imageUploadHandler, // 指定你的自定义上传函数
    allowUpload: true, // 允许上传操作
    accept: 'image/*' // 限制可上传的文件类型为图片
  }
};

2. 完善自定义上传函数 #

你的imageUploadHandler需要实现上传逻辑，并通过success/failure回调通知编辑器结果。示例代码：

const imageUploadHandler = async (blobInfo, success, failure) => {
  try {
    // 构造表单数据，适配大多数后端上传接口格式
    const formData = new FormData();
    formData.append('image', blobInfo.blob(), blobInfo.filename());

    // 替换为你的实际上传接口地址
    const response = await fetch('/your-upload-api', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) throw new Error('上传请求失败');

    const resData = await response.json();
    // 调用success回调传入图片URL，编辑器会自动插入<img>标签
    success(resData.imageUrl);
  } catch (err) {
    // 上传失败时调用failure回调，编辑器会显示错误提示
    failure(err.message);
  }
};

3. React组件中使用配置 #

确保将上述配置传入Jodit编辑器组件：

import JoditEditor from '@jodit/react';
import { useState } from 'react';

export default function CustomImageUploadEditor() {
  const [editorContent, setEditorContent] = useState('');

  const imageUploadHandler = async (blobInfo, success, failure) => {
    // 这里实现你的上传逻辑
  };

  const config = {
    readonly: false,
    height: 400,
    uploader: {
      insertImageAsBase64URI: false,
      url: '',
      upload: imageUploadHandler,
      allowUpload: true,
      accept: 'image/*'
    }
  };

  return (
    <JoditEditor
      value={editorContent}
      config={config}
      onChange={newContent => setEditorContent(newContent)}
    />
  );
}

关键说明 #

• 仅设置insertImageAsBase64URI: false会导致编辑器无有效上传渠道，因此必须同时配置upload函数
• success回调是核心：传入图片URL后，编辑器会自动生成<img>标签插入到内容中
• 若需要自定义插入的标签格式，可在success前自行拼接HTML，再调用success传入完整HTML字符串

内容的提问来源于stack exchange，提问作者sarmad bin tahir