如何刷新TinyMCE编辑器的image_list下拉列表？

1. 配置多图上传支持 #

要实现批量上传图片，先在TinyMCE初始化时开启多图上传开关，并指定后端上传接口：

tinymce.init({
  selector: '#your-editor-id',
  image_list: masterImageList,
  // 开启多图上传功能
  images_upload_multiple: true,
  // 指向你的后端图片上传接口
  images_upload_url: '/api/upload-images',
  // 其他编辑器基础配置...
});

2. 自定义上传逻辑，上传完成后触发列表刷新 #

如果需要更灵活的控制（比如上传成功后立刻刷新图片列表），推荐使用images_upload_handler自定义上传流程，在上传成功回调里调用刷新函数：

tinymce.init({
  // 其他配置...
  images_upload_handler: function(blobInfo, success, failure) {
    const formData = new FormData();
    formData.append('image', blobInfo.blob(), blobInfo.filename());

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/upload-images');
    
    xhr.onload = function() {
      if (xhr.status === 200) {
        const res = JSON.parse(xhr.responseText);
        // 通知编辑器上传成功，返回图片访问URL
        success(res.url);
        // 上传完成后立即触发图片列表刷新
        refreshMasterImageList();
      } else {
        failure(`上传失败: ${xhr.statusText}`);
      }
    };
    
    xhr.onerror = () => failure('网络请求失败');
    xhr.send(formData);
  }
});

3. 实现列表刷新函数，同步更新masterImageList与编辑器 #

编写refreshMasterImageList函数，重新拉取最新图片列表，更新全局变量masterImageList后同步到编辑器，同时刷新已打开的图片选择器：

function refreshMasterImageList() {
  // 调用后端接口获取最新的图片列表数据
  fetch('/api/get-image-list')
    .then(res => res.json())
    .then(newImageList => {
      // 更新全局变量masterImageList为最新列表
      masterImageList = newImageList;
      // 获取当前编辑器实例
      const editor = tinymce.get('your-editor-id');
      // 更新编辑器的image_list配置
      editor.settings.image_list = masterImageList;

      // 如果图片选择器对话框已经打开，手动刷新列表内容
      const openDialogs = editor.windowManager.getWindows();
      const imageDialog = openDialogs.find(dialog => dialog.settings.title === 'Insert/Edit Image');
      if (imageDialog) {
        // 找到图片列表组件并执行刷新
        imageDialog.find('listbox').first().refresh();
      }
    })
    .catch(err => console.error('刷新图片列表出错:', err));
}

关键说明 #

• 如果上传时图片选择器未打开，下次打开时会自动读取更新后的masterImageList；如果对话框已打开，上述代码会手动触发列表刷新。
• 需确保后端上传接口支持多文件上传（根据前端传入的FormData调整后端逻辑）。

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