如何在 GrapesJS 中上传视频文件模板？

Question

我正在使用 GrapeJS 进行一个项目，并已使用该标签成功实现了自定义图像上传功能。现在，我需要对视频做类似的事情。具体来说，我想：

将视频模板（如标签）添加到编辑器。 允许用户上传视频文件并动态设置视频源。 确保视频在上传后出现在 GrapeJS 画布中（就像带有标签的图像的显示方式一样）。 我的问题是：如何上传视频模板本身，以便用户可以在 GrapeJS 编辑器中与其进行交互？ GrapeJS 中是否有内置方法或插件可以实现此目的？如果没有，您能否建议一个自定义解决方案，用于在 GrapeJS 中添加具有上传功能的视频组件？

任何指导或示例将不胜感激！ https://grapesjs.com/demo此链接 [![在此输入图片描述]

我正在尝试实现一个可以将视频标签拖动到特定区域的功能。当用户单击视频帧时，将打开一个文件上传对话框，允许他们选择视频文件（例如 MP4）。选择文件后，我想将其转换为Base64格式，并将视频标签的src属性设置为这个Base64字符串

我的问题是：如何上传视频模板本身，以便用户可以在 GrapeJS 编辑器中与其交互？

Answer 1

您可以使用它来添加视频标签。

self.editor.DomComponents.addType('video', {
        model: {
            defaults: {
                tagName: 'video',
                style: { width: '100%', height: '100%' },
                traits: [
                    {
                        type: 'text',
                        label: 'Source',
                        name: 'src',
                        changeProp: 1,
                    }
                ],
                stylable: ['width', 'height'],
            }
        },
        view: {
            events: {
                'dblclick': 'clickOnElement'
            },
            init() {
                this.listenTo(this.model, 'change:target', this.updateTarget);
            },
            updateTarget(src) {
                this.model.set('src', src);
            },
            clickOnElement(ev) {
                const editor = self.editor;
                const assetManager = editor.AssetManager;
                assetManager.open();
            }
        }
    });

将新视频添加到 iframe 时，将弹出资产管理器模式。 当 DbClicking iframe 内的视频时，默认情况下不会弹出任何模式，这就是为什么我将事件部分添加到视图对象以调用 ClickOnElement 并再次打开模式。

还有一件事，当更改视频网址时，我们必须通过调用来通知模型：

const selectedAsset = self.editor.AssetManager.get(videoURL);
const selectedComp = self.editor.getSelected();
selected.getView().updateTarget(self.selectedAsset.getSrc());