如何用Mongoose+Express配置TinyMCE图片上传至Cloudinary？

先给你明确结论：完全可以通过你提到的tinymce.init({})、tinymce.activeEditor.uploadImages()（包括带回调的版本）实现需求，核心是确保图片上传完成后，编辑器内容里的图片路径替换为Cloudinary的在线URL，再提交表单让后端拿到完整内容。下面分步骤拆解实现方式：

1. 配置TinyMCE初始化参数（tinymce.init） #

首先在前端配置TinyMCE的图片上传逻辑，让用户插入的图片自动上传到Cloudinary，且编辑器自动替换图片为Cloudinary的在线URL：

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'image code',
  toolbar: 'image code',
  // 自定义图片上传处理器
  images_upload_handler: function (blobInfo, success, failure) {
    const formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());
    formData.append('upload_preset', 'your-unsigned-upload-preset'); // 替换为你的Cloudinary上传预设

    fetch('https://api.cloudinary.com/v1_1/your-cloud-name/image/upload', {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(data => {
      success(data.secure_url); // 将Cloudinary返回的HTTPS URL插入编辑器
    })
    .catch(err => {
      failure(`图片上传失败：${err.message}`);
    });
  }
});

这段配置的关键是images_upload_handler——用户插入图片时会触发这个函数，把图片传到Cloudinary后，将返回的在线URL替换编辑器里的图片占位符，这样编辑器内容里就不再是base64格式的图片，而是指向Cloudinary的<img>标签，后续提交表单时就能随req.body一起传到后端。

2. 用tinymce.activeEditor.uploadImages()确保上传完成再提交 #

如果用户是手动粘贴图片（会先以base64形式暂存在编辑器），必须在提交表单前调用uploadImages()，等待所有图片上传完成后再提交，否则req.body里可能还残留未上传的base64内容。

推荐使用带回调的版本，确保上传成功后再触发表单提交：

// 绑定表单提交按钮的点击事件
document.getElementById('submit-btn').addEventListener('click', function(e) {
  e.preventDefault(); // 先阻止默认提交行为

  // 上传所有未完成的图片
  tinymce.activeEditor.uploadImages(function(success) {
    if (success) {
      // 所有图片上传完成，现在提交表单
      document.getElementById('your-form-id').submit();
      // 若用AJAX提交，直接取编辑器内容：tinymce.activeEditor.getContent()
    } else {
      alert('部分图片上传失败，请重试');
    }
  });
});

这里的success参数会返回布尔值，告知所有图片是否上传成功。此时编辑器里的所有图片都已替换为Cloudinary的URL，提交表单后，后端就能通过req.body.your-editor-field-name拿到完整的带图片的HTML内容。

3. 后端Mongoose Schema适配 #

你的Mongoose Schema只需要一个字段存储编辑器的HTML内容即可，示例如下：

const mongoose = require('mongoose');
mongoose.Promise = global.Promise;

const docSchema = new mongoose.Schema({
  // 其他业务字段...
  content: {
    type: String,
    required: true
  },
  // 可选：如果需要单独存储图片URL数组，可添加此字段
  imageUrls: [String]
});

module.exports = mongoose.model('Doc', docSchema);

后端收到req.body后，直接将编辑器的HTML内容存入content字段即可。如果需要单独提取图片URL做后续处理，可以用正则表达式从HTML中匹配所有<img>标签的src属性，存入imageUrls数组。

常见注意事项 #

• 确保Cloudinary的上传预设（upload_preset）配置正确，若用前端直接上传需开启匿名上传权限，追求安全性的话建议用后端生成签名的上传方式。
• 表单提交必须在uploadImages的回调内执行，否则会出现图片未上传完成就提交的情况。
• 若用AJAX提交表单，直接调用tinymce.activeEditor.getContent()就能拿到带图片URL的完整内容，无需依赖表单默认提交逻辑。

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