React TinyMCE外部图片上传按钮如何调用已有images_upload_handler

嗨，这个问题其实很好解决，核心就是要么直接复用你已经写好的images_upload_handler函数，要么调用TinyMCE内置的上传触发逻辑，下面给你两种具体的实现方案：

方案一：直接复用自定义的images_upload_handler #

如果你的上传 handler 是独立定义的（不是写在配置里的匿名函数），可以直接在外部按钮的点击事件里调用它，只需要处理好文件选择和参数传递：

1. 先把你的 handler 抽成独立函数（方便复用）：

// 独立定义你的上传处理函数
const customImageUploadHandler = (blobInfo, progressCallback) => {
  return new Promise((resolve, reject) => {
    // 这里是你原本的上传逻辑，比如用FormData提交文件到后端
    const formData = new FormData();
    formData.append('image', blobInfo.blob(), blobInfo.filename());
    
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/your-upload-api');
    xhr.upload.onprogress = (e) => {
      progressCallback(e.loaded / e.total * 100);
    };
    xhr.onload = () => {
      if (xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        resolve(response.imageUrl); // 返回图片URL
      } else {
        reject('上传失败');
      }
    };
    xhr.send(formData);
  });
};

2. 给外部按钮绑定点击事件，处理文件选择并调用handler：

const handleExternalUploadBtnClick = () => {
  // 创建隐藏的文件选择输入框
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = 'image/*'; // 只允许选择图片

  fileInput.onchange = (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    // 用TinyMCE的BlobInfo包装文件（需要确保tinymce模块已加载）
    const blobInfo = tinymce.activeEditor.editorUpload.blobCache.create(
      selectedFile.name,
      selectedFile,
      `image/${selectedFile.type}`
    );

    // 调用自定义handler，完成后插入图片到编辑器
    customImageUploadHandler(blobInfo, (progress) => {
      // 这里可以添加进度提示，比如更新页面上的进度条
      console.log(`上传进度：${progress}%`);
    }).then((imageUrl) => {
      // 上传成功，插入图片到编辑器光标位置
      tinymce.activeEditor.insertContent(`<img src="${imageUrl}" alt="${selectedFile.name}" />`);
    }).catch((err) => {
      alert(`上传出错：${err}`);
    });
  };

  // 触发文件选择框
  fileInput.click();
};

方案二：调用TinyMCE内置的上传流程 #

如果你的images_upload_handler是写在编辑器配置里的匿名函数，或者想完全复用编辑器自带的上传交互（比如弹窗、内置进度提示），可以直接调用编辑器的内置命令，模拟点击默认上传按钮的行为：

const handleExternalUploadBtnClick = () => {
  // 确保编辑器已初始化，获取编辑器实例
  const editor = tinymce.activeEditor;
  if (!editor) {
    alert('编辑器尚未初始化完成');
    return;
  }

  // 触发编辑器内置的图片上传命令，会自动调用你配置的images_upload_handler
  editor.execCommand('mceImageUpload');
};

额外注意事项 #

• 为了更可靠地获取编辑器实例，建议在TinyMCE的setup回调里保存实例，而不是依赖tinymce.activeEditor：

<TinyMCE
  className={this.props.class}
  init={{
    // 你的其他配置项...
    images_upload_handler: (blobInfo, progress) => {
      // 你的匿名上传逻辑
    },
    setup: (editor) => {
      // 把编辑器实例保存到组件状态或全局变量
      this.editorInstance = editor;
    }
  }}
/>

之后外部按钮点击时就可以用this.editorInstance代替tinymce.activeEditor，避免多个编辑器实例时出现问题。

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