Jodit 编辑器自定义图片上传至 React 应用的完整实现教程

本文详解如何在 react 中通过 jodit editor 的 `uploader` 配置项，将本地图片自动上传至自定义后端接口（如 `/files`），并正确插入返回的图片 url，无需手动处理文件选择与 dom 插入。

Jodit Editor 提供了高度可定制的图片上传机制，其核心在于 config.uploader 对象。你无需接管文件选择逻辑（如 ）、也不必手动调用 axios 或处理 FormData —— 只需正确配置 uploader，Jodit 便会自动捕获拖拽/点击插入的图片、封装请求、解析响应，并将返回的图片 URL 插入编辑器中。

以下是你需要集成到原有 config 中的关键 uploader 配置（已适配你的后端要求）：

uploader: {   insertImageAsBase64URI: false, // 禁用 base64，强制走 URL 插入   imagesExtensions: ['jpg', 'jpeg', 'png', 'gif'],   withCredentials: false,   format: 'json', // 告知 Jodit 期望 JSON 响应   method: 'POST',   url: 'http://localhost:3000/files', // 你的后端上传地址   headers: {     // 注意：不要手动设置 'Content-Type'     // 浏览器会自动设置为 multipart/form-data 并附带 boundary   },   prepareData: function (data) {     // data 是 FormData 实例；this.file 是用户选中的 File 对象     data.append('file', this.file);     return data;   },   isSuccess: function (resp) {     // 判断响应是否成功：你的后端返回纯字符串（URL），无 error 字段     // 因此我们约定：只要响应体为非空字符串即视为成功     return typeof resp === 'string' && resp.trim().length > 0;   },   getMsg: function (resp) {     // 错误提示文案（仅在失败时调用）     return resp?.error || '图片上传失败，请检查网络或文件格式';   },   process: function (resp) {     // 将原始响应（纯字符串 URL）标准化为 Jodit 期望的结构     return {       files: [resp], // 必须是数组，且元素为图片 URL 字符串       path: '',       baseurl: '',       error: typeof resp !== 'string' || !resp.trim() ? 1 : 0,       msg: typeof resp === 'string' ? '上传成功' : '未知错误'     };   },   defaultHandlerSuccess: function (data, resp) {     const files = data.files || [];     if (files.length > 0 && typeof files[0] === 'string') {       // 插入图片，宽高可选（null 表示保持原始尺寸）       this.selection.insertImage(files[0], null, 300); // 默认宽度 300px     }   },   defaultHandlerError: function (resp) {     this.events.fire('errorPopup', this.i18n(resp.msg || '上传出错'));   } }

? 关键注意事项：

• ✅ 不要手动设置 ‘Content-Type’: ‘multipart/form-data’：浏览器在使用 FormData 发送请求时会自动生成正确的 Content-Type（含 boundary）。手动设置会导致后端无法解析。
• ✅ isSuccess 和 process 必须协同工作：因你的后端只返回纯字符串（如 “https://example.com/uploads/abc.jpg”），所以 isSuccess 应基于字符串有效性判断，process 则需将其包装为 { files: […] } 结构。
• ✅ insertImageAsBase64URI: false 是必须项，否则 Jodit 可能忽略 URL 而尝试转为 base64。
• ⚠️ 若后端返回 jsON（如 { “url”: “…” }），请相应调整 process 中的 files: [resp.url] 和 isSuccess: !!resp.url。

最后，将上述 uploader 对象嵌入你的 config 中，并确保 enableDragAndDropFileToEditor: true（默认已启用），即可支持拖拽图片、点击工具栏「图片」按钮、粘贴截图等多种上传方式。

完成配置后，用户操作完全无感：选图 → 自动上传 → 后端返回 URL → Jodit 自动插入带尺寸的 标签。整个流程解耦清晰，符合 react 最佳实践，也避免了重复造轮子。