如何在CKEditor5中添加自定义audio标签 插入音频不显示问题求助

问题1：为什么插入的audio标签没有在编辑器中正常显示？ #

核心原因是你只完成了audio元素的上下行转换配置，漏掉了属性的转换映射，CKEditor不会自动将model层的src、controls属性同步到视图层的DOM节点上，导致渲染出来的audio标签没有有效属性，自然无法显示和播放。
另外你的schema配置存在逻辑冲突：你给audio设置了isBlock: true（块级元素），同时又允许它插入到paragraph（段落，内联内容容器）中，不符合HTML块级元素嵌套规则，CKEditor会自动修正插入位置，也可能导致渲染异常。

修复步骤：

1. 补充属性转换规则，在元素转换配置后新增以下代码：

// 同步src属性
editor.conversion.attributeToAttribute({
  model: 'src',
  view: 'src'
});
// 同步controls属性
editor.conversion.attributeToAttribute({
  model: 'controls',
  view: 'controls'
});

2. 修正schema配置：
   如果要保留audio为块级元素，就从allowIn中移除paragraph；如果需要支持在行内插入音频，就删除isBlock: true，新增isInline: true配置。

问题2：为什么控制台输出的内容不符合预期？ #

结合你给出的代码，常见的异常原因有三类：

• 依赖未正确导入：你用到的FileDialogButtonView、MusicIcon如果没有提前从对应CKEditor依赖包中导入，控制台会报变量未定义错误。
• getBase64方法逻辑异常：如果是你自行实现的base64转换方法，可能存在回调参数错误、转换失败的问题，导致src属性赋值为空或者不符合要求。
• schema自动修正行为：因为你之前的块级元素插入到段落的配置冲突，CKEditor会自动调整插入位置、拆分父元素，你打印的插入位置、DOM结构会和你的预期不一致。

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