如何在Grapesjs中添加iframe？

Question

我试过一些插件，但没能跟上。基本上我想要一个iframe来添加和预览播客和其他东西。

有没有像youtube这样的带有grapesjs的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