在HTML和JavaScript中配置TinyMCE与Cloudinary的问题

嘿，我懂你的困扰——那个Ruby on Rails导向的教程确实对纯前端场景没帮助，而且不用服务端完全能搞定！我来一步步帮你梳理清楚：

1. 完全不需要搭建服务端端点！ #

你可以用**无签名上传预设（Unsigned Upload Preset）**实现纯前端上传，完全不需要服务端生成签名。只要在Cloudinary控制台里创建一个上传预设，开启「无签名」选项就行，这个预设就是你代码里用到的cloudinary_upload_preset。

2. 上传后获取正确图片URL的问题 #

你代码里的核心问题是success回调用了json.location，但Cloudinary上传API的响应里，符合你期望的完整HTTPS图片链接是存在secure_url字段里的（url字段是HTTP协议，更推荐用secure_url）。

修改后的代码如下：

images_upload_handler: function (blobInfo, success, failure) {
  var xhr, formData;
  xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', 'https://api.cloudinary.com/v1_1/strova/upload');
  
  xhr.onload = function () {
    var json;
    if (xhr.status !== 200) {
      failure('HTTP Error: ' + xhr.status);
      return;
    }
    json = JSON.parse(xhr.responseText);
    // 替换成secure_url，就能得到你想要的完整CDN图片链接
    success(json.secure_url);
  };
  
  formData = new FormData();
  formData.append('file', blobInfo.blob(), blobInfo.filename());
  formData.append('upload_preset', cloudinary_upload_preset); // 确保这个变量已正确赋值
  
  xhr.send(formData);
}

3. 额外注意事项 #

• 务必确认你的cloudinary_upload_preset是无签名的：在Cloudinary控制台的「上传预设」页面检查，一定要勾选「Unsigned」选项，否则前端上传会直接报错。
• 如果你需要对图片做默认处理（比如压缩、格式转换），可以在上传预设里提前配置，上传后的URL会自动带上这些处理参数。

这样调整后，上传成功后TinyMCE就能正确插入你期望的那种Cloudinary图片链接了，全程不需要服务端做额外操作，只需要渲染HTML和JS就够！

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