如何将Strapi媒体库中的视频文件嵌入CKEditor5自定义字段？

方案1：自定义CKEditor5插件扩展功能 #

CKEditor5支持自定义扩展，你可以自行开发轻量插件实现视频嵌入功能，步骤如下：

• 找到Strapi项目中CKEditor5的配置目录（一般为./src/plugins/ckeditor）
• 编写自定义插件，实现从Strapi媒体库选择视频、生成<video>标签插入编辑器的逻辑
• 将插件注册到CKEditor5的配置中
• 重新构建Strapi插件并重启服务

核心是借助Strapi媒体API获取视频URL，在编辑器中插入标准HTML5视频标签，简化示例代码如下：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

export default class VideoEmbed extends Plugin {
    init() {
        const editor = this.editor;
        
        editor.ui.componentFactory.add('videoEmbed', locale => {
            const view = new ButtonView(locale);
            
            view.set({
                label: '插入视频',
                icon: '📹',
                tooltip: true
            });
            
            view.on('execute', () => {
                const videoUrl = prompt('输入视频URL（从Strapi媒体库复制）');
                if (videoUrl) {
                    editor.model.change(writer => {
                        const videoElement = writer.createElement('video', {
                            src: videoUrl,
                            controls: true,
                            width: '100%'
                        });
                        editor.model.insertContent(videoElement, editor.model.document.selection);
                    });
                }
            });
            
            return view;
        });
    }
}

方案2：手动插入视频HTML代码 #

如果不想开发插件，可以用更简便的方式：

• 在内容类型中单独添加媒体字段用于上传视频
• 从Strapi媒体库复制视频的直接URL，在CKEditor5的源码模式中手动插入HTML：

  <video src="/uploads/your_video_file.mp4" controls width="100%"></video>
  

• 确保Strapi的媒体文件权限设置为公开，或配置对应访问策略

方案3：免费替代编辑器选项 #

如果不想折腾CKEditor5，可考虑这些免费无限制的编辑器：

• Quill Editor：支持通过自定义模块实现视频嵌入，社区有现成扩展方案
• SimpleMDE：轻量Markdown编辑器，支持用![视频描述](视频URL)语法插入视频，渲染时自动转为<video>标签

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