如何自定义 Jodit 编辑器的图片上传逻辑以对接 React 后端接口

本文详解如何通过配置 jodit 的 `uploader` 选项，实现从本地选择图片后自动上传至指定后端接口（如 `/files`），并正确插入服务器返回的图片 url 到编辑器中，无需手动处理文件选择与 dom 插入。

Jodit 编辑器原生支持高度可定制的图片上传流程，关键在于正确配置 config.uploader 对象。你无需接管文件选择逻辑（如 ），也不需手动调用 axios 或操作 DOM 插入 标签——Jodit 会在用户点击「插入图片」或拖拽图片到编辑区时，自动触发上传流程，并根据响应结果智能插入图片。

以下是你需要集成到 config 中的核心 uploader 配置（已适配你的后端要求）：

uploader: {   insertImageAsBase64URI: false, // 禁用 base64，强制走 URL 插入   imagesExtensions: ['jpg', 'jpeg', 'png', 'gif'], // 允许的图片格式   method: 'POST',   url: 'http://localhost:3000/files', // 你的后端上传地址   headers: {     // ⚠️ 注意：不要手动设置 'Content-Type'     // 浏览器会自动添加 boundary，设为 multipart/form-data 会导致 400 错误   },   preparedata: function (data) {     // this.file 是 Jodit 自动捕获的 File 对象     data.append('file', this.file);     return data;   },   isSuccess: function (resp) {     // 假设后端成功响应为纯字符串（如 "https://cdn.example.com/img.png"）     // Jodit 默认期望 resp.error === undefined 或 falsy     return typeof resp === 'string' && resp.startsWith('http');   },   process: function (resp) {     // 将纯字符串响应包装为 Jodit 期望的格式     return {       files: [resp], // 必须是数组，且首个元素即图片 URL       path: '',       baseurl: '',       error: 0,       msg: 'Upload successful'     };   },   defaultHandlerSuccess: function (data, resp) {     const url = Array.isArray(data.files) && data.files[0] ? data.files[0] : '';     if (url) {       // 插入图片，宽度设为 250px（可按需调整）       this.selection.insertImage(url, NULL, 250);     }   },   defaultHandlerError: function (resp) {     const msg = typeof resp === 'string' ? resp : 'Upload failed';     this.events.fire('errorPopap', this.i18n(msg));   } }

✅ 关键注意事项：

• 不要手动设置 Content-Type 头：FormData 上传必须由浏览器自动设置 Content-Type: multipart/form-data; boundary=…，硬编码会导致请求失败；
• 后端响应必须为 jsON 或可解析结构：虽然你提到“只返回一个字符串”，但 Jodit 的 process 函数仍需接收该字符串作为 resp 参数。若后端实际返回纯文本（非 json），需确保 Axios 响应配置 responseType: ‘text’ —— 但更推荐后端统一返回标准 JSON，例如：{ “data”: “https://…” }；
• 若后端返回的是 JSON 对象（如 { “data”: “https://…” }），则 process 应改为：

  process: function (resp) {   return {     files: [resp.data],     path: '',     baseurl: '',     error: resp.error ? 1 : 0,     msg: resp.message || 'Success'   }; }

• isSuccess 函数用于判断响应是否成功，返回 true 时触发 defaultHandlerSuccess；否则走错误流程；
• insertImage 的第三个参数为默认宽度（单位 px），传 null 表示不设宽高，由 css 控制。

最后，将上述 uploader 配置合并进你的 config 对象，并确保 enableDragAndDropFileToEditor: true 和 buttons: [‘image’]（或未被 removeButtons 移除）已启用，即可开箱即用：用户点击工具栏「图片」按钮、粘贴图片或拖拽图片到编辑区，全部自动完成上传与插入。

这样既保持了 Jodit 的原生交互体验，又完全解耦了前端上传逻辑，真正实现「配置即集成」。