如何在TinyMCE中将本地上传图片替换为服务器URL？

核心问题修正 #

你当前的images_upload_handler用法不符合TinyMCE官方规范，不需要手动监听input的change事件——TinyMCE已经封装了完整的图片上传流程（包括点击上传、粘贴图片等场景），只需利用官方提供的回调参数即可自动替换base64为S3文件URL。

步骤1：修改TinyMCE初始化配置 #

调整images_upload_handler的引用方式，并优化内容获取逻辑：

tinymce.init({
  // 保留你的其他配置项...
  images_upload_handler: scope.image_upload_handler, // 注意：不要加()，传递函数引用即可
  setup: function(editor) {
    editor.on('Paste Change input Undo Redo', function () {
      clearTimeout(editorChangeHandlerId);
      editorChangeHandlerId = setTimeout(function() {
        scope.ngModel = editor.getContent(); // 使用当前编辑器实例，比activeEditor更可靠
        console.log(scope.ngModel);
      }, 100);
    });
  }
});

步骤2：重写图片上传处理函数 #

按照TinyMCE要求，images_upload_handler接收三个核心参数：blobInfo（文件信息对象）、success（上传成功回调）、failure（上传失败回调），利用这些参数完成上传并自动替换图片URL：

scope.image_upload_handler = function (blobInfo, success, failure) {
  const file = blobInfo.blob(); // 获取上传的文件对象
  
  // 验证文件类型
  if (!/^image\//.test(file.type)) {
    failure('仅支持上传图片文件');
    return;
  }

  scope.fileUploading = true;
  commonSrv.fnFileUpload(file, { "pathToBeSave": 'tinyMceImages' })
    .then(function(response) {
      scope.fileUploading = false;
      // 构建完整的S3文件URL
      var fileUrl = bbConfig.CLOUD_ASSET_STORAGE_URL + '/tinyMceImages/' + response.data.replace(/"/g, '');
      // 调用success回调，TinyMCE会自动将编辑器中的base64图片替换为该URL
      success(fileUrl);
    })
    .catch(function(error) {
      scope.fileUploading = false;
      failure('图片上传失败：' + (error.message || '未知错误'));
    });
};

关键说明 #

1. 无需手动操作选区（即你代码中的someMethod和someOtherMethod），调用success(fileUrl)后，TinyMCE会自动处理编辑器内的图片替换逻辑。
2. 使用当前editor实例的getContent()替代tinymce.activeEditor，避免多编辑器实例场景下的错误。
3. 新增错误捕获逻辑，处理上传失败的情况，提升用户体验。

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