TinyMCE自定义image插件上传视频默认选图片，如何修改为视频/mp4格式

云原生阿岚

2026-10-4

解决方案

你遇到的限制是TinyMCE原生image插件默认给文件选择器加了图片类型的`accept`属性约束，按照以下两种场景修改即可：

场景1：直接修改image插件源码

如果你是直接改造的image插件本地源码，按以下步骤修改：

找到你项目中引入的image插件文件，未压缩版一般路径为plugins/image/plugin.js，压缩版为plugins/image/plugin.min.js
全局搜索字符串accept: 'image/*'，这就是默认限制图片类型的配置
将该属性值替换为你需要的视频格式即可，例如仅支持mp4就改为accept: 'video/mp4'，如果需要同时保留图片+常见视频可选，改为accept: 'image/*,video/mp4,video/webm,video/quicktime'
保存文件后重新加载编辑器即可生效

场景2：通过初始化配置覆盖（无需改源码，更推荐）

如果不想修改插件源码，可以在TinyMCE的初始化配置里自定义文件选择逻辑，直接覆盖默认的类型限制：

tinymce.init({
  selector: 'textarea#你的编辑器ID',
  plugins: 'image',
  toolbar: 'image',
  // 新增以下配置项
  file_picker_types: 'image',
  file_picker_callback: function (callback, value, meta) {
    if (meta.filetype === 'image') {
      // 手动创建文件选择器
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      // 这里自定义你需要支持的文件类型
      input.setAttribute('accept', 'video/mp4,video/webm,image/*');
      input.onchange = function () {
        const file = this.files[0];
        // 此处沿用你之前已经写好的上传逻辑，上传完成后调用callback返回资源地址即可
        const reader = new FileReader();
        reader.onload = function (e) {
          // 示例逻辑，实际替换为你上传接口返回的远程url
          callback(e.target.result, { alt: file.name });
        };
        reader.readAsDataURL(file);
      };
      input.click();
    }
  }
})