如何在 Grapesjs 中添加 iframe？

Question

我尝试了一些插件，但无法跟进。基本上我想要iframe添加和预览播客和其他东西。有没有像grapesjs 附带的youtube 块这样的iframe 块？

Answer 1

据我所知，目前还没有一个好的grapesjs iframe 插件。

如果您的用例很简单，您可以创建自己的 iframe 块，其中包含您需要的信息：

var editor = grapesjs.init({...});

var blockManager = editor.BlockManager;

blockManager.add('iframe', {

  label: 'iframe',

  content: '<iframe src="<your iframe src here>"></iframe>',

});

例如，如果您想要一个具有可自定义 src 特征的 iframe 组件，您可以这样做：

var editor = grapesjs.init({...});

editor.DomComponents.addType("iframe", {

    isComponent: el => el.tagName === "IFRAME",

    model: {

        defaults: {

            type: "iframe",

            traits: [

                {

                  type: "text",

                  label: "src",

                  name: "src"

                }

            ]

        }

    }

});

editor.BlockManager.add("iframe", {

    label: "iframe",

    type: "iframe",

    content: "<iframe> </iframe>",

    selectable: true

});

这是一个有效的代码框： https ://codesandbox.io/s/grapesjs-o9hxu

如果您需要更多自定义选项，您可以学习如何使用文档创建自定义块和组件：

https://grapesjs.com/docs/modules/Blocks

https://grapesjs.com/docs/modules/Components

https://grapesjs.com/docs/modules/Traits