如何在GrapesJS中实现带上传功能的视频模板组件？

一、核心说明 #

GrapesJS 没有内置直接匹配需求的视频上传组件或官方插件，需基于现有自定义能力实现，以下是完整落地方案：

二、具体实现步骤 #

1. 注册自定义视频组件 #

在编辑器初始化阶段，注册包含 <video> 标签的自定义组件，配置默认属性、样式及上传交互：

const editor = grapesjs.init({
  container: '#gjs',
  // 你的其他编辑器配置
});

// 注册带上传功能的视频组件
editor.DomComponents.addType('custom-video', {
  model: {
    defaults: {
      tagName: 'video',
      attributes: {
        controls: true,
        width: '100%',
        height: 'auto',
      },
      styles: {
        display: 'block',
        maxWidth: '100%',
        border: '1px dashed #ccc',
      },
      traits: [
        {
          type: 'button',
          label: '上传视频',
          name: 'upload-trigger',
          full: true,
        },
      ],
    },
    // 处理上传按钮点击逻辑
    init() {
      this.on('change:upload-trigger', () => {
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = 'video/mp4,video/webm,video/ogg';
        
        fileInput.onchange = (e) => {
          const videoFile = e.target.files[0];
          if (!videoFile) return;
          
          const reader = new FileReader();
          reader.onload = (event) => {
            // 将视频转为Base64并设置为src
            this.set('src', event.target.result);
            this.addAttributes({ src: event.target.result });
          };
          reader.readAsDataURL(videoFile);
        });
        
        fileInput.click();
      });
    },
  },
  view: {
    // 确保视频在画布中正确渲染
    render() {
      this.el.innerHTML = `<video ${this.model.getAttributesString()}></video>`;
      return this;
    },
  },
});

2. 添加视频模板到区块面板 #

把自定义组件加入区块面板，支持拖拽到画布：

editor.BlockManager.add('custom-video-block', {
  label: '自定义视频',
  content: { type: 'custom-video' },
  category: '媒体',
  media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>',
});

3. 优化交互与渲染 #

• 若需点击视频帧触发上传，可在组件视图层添加点击事件监听，替换 trait 按钮的触发逻辑：

// 在view对象中添加
events: {
  'click': 'handleVideoClick',
},
handleVideoClick() {
  // 复用上面的文件选择逻辑
  const fileInput = document.createElement('input');
  // ... 后续上传逻辑与之前一致
}

• 确保视频组件在画布中渲染后，controls 属性生效，支持预览操作。

4. 适配现有拖拽逻辑 #

如果项目已有指定区域的拖拽限制，只需确保 custom-video 组件类型被允许拖拽到目标区域即可，无需额外修改拖拽规则。

三、注意事项 #

• Base64 体积限制：大体积视频转 Base64 会导致编辑器性能下降，建议仅用于小视频；若需支持大文件，可改为上传至服务器后设置远程 URL。
• 格式兼容：代码中限制了常用视频格式，可根据需求调整 accept 属性值。
• 样式适配：可根据项目设计调整视频组件的默认样式，避免画布中显示异常。

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