CKEditor 5音频文件上传器疑问：是否需编写自定义插件？

不用编写完整的自定义插件，完全可以复用现有图片上传的逻辑，只需要做几处小修改就能实现需求：

1. 扩展上传文件的允许类型 #

在你现有的自定义图片上传配置中，把音频格式（如.mp3、.wav、.ogg）加入允许列表，让上传控件能识别并选择音频文件。比如在上传适配器的初始化代码里添加：

// 示例：扩展允许的MIME类型
const allowedTypes = ['image/*', 'audio/mpeg', 'audio/wav', 'audio/ogg'];

2. 修改上传成功后的内容插入逻辑 #

图片上传完成后默认插入<img>标签，这里需要判断文件类型，若为音频则生成<audio>标签：

// 现有上传适配器的upload方法片段改造
upload() {
  return this.xhr.send().then(response => {
    const fileUrl = response.uploadedUrl;
    const fileType = this.file.type;

    if (fileType.startsWith('audio/')) {
      // 插入带播放控件的audio标签
      const audioNode = this.editor.model.document.createElement('audio', {
        src: fileUrl,
        controls: 'controls'
      });
      this.editor.model.insertContent(audioNode);
    } else {
      // 保留原有图片插入逻辑
      const imageNode = this.editor.model.document.createElement('image', {
        src: fileUrl
      });
      this.editor.model.insertContent(imageNode);
    }
  });
}

3. 确保编辑器允许audio标签存在 #

在CKEditor的初始化配置中，添加对<audio>标签的支持，避免被编辑器过滤：

ClassicEditor.create(document.querySelector('#editor'), {
  // 其他配置...
  schema: {
    allow: {
      $block: ['audio'],
      $attribute: ['src', 'controls']
    }
  }
});

4. 可选：优化上传按钮的文件选择体验 #

如果需要单独的音频上传按钮，可以复制现有"上传图片"按钮的配置，修改其accept属性为音频格式：

// 自定义工具栏按钮示例
toolbar: [
  // 其他按钮...
  {
    name: 'upload',
    items: [
      {
        name: 'uploadAudio',
        label: '上传音频',
        icon: 'audio', // 可自定义图标
        command: 'uploadAudio',
        accept: 'audio/*'
      }
    ]
  }
]

通过以上改动，就能基于已有的图片上传能力快速实现音频上传+嵌入的需求，无需从头开发插件。

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