如何在 Grapesjs 中添加 iframe？答案

【问题标题】：How to add iframe in Grapesjs?如何在 Grapesjs 中添加 iframe？
【发布时间】：2020-10-12 02:32:52
【问题描述】：

我尝试了一些插件，但无法跟进。基本上我想要一个iframe 来添加和预览播客和其他东西。

是否有任何 iframe 块，例如grapesjs 附带的 youtube 块？

【问题讨论】：

【解决方案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

【讨论】：

谢谢，我在调色板中获得了 iframe 选项。但是当我拖放时，它会自动触发一个请求（currenturl/%3Cyour%20iframe%20src%20here%3E），这会导致错误。你能帮忙吗？
@Rahul，您需要将您的 iframe 源代码放在我写过“”的位置（例如指向您的视频或播客资源的 https:// URL）。我还更新了答案，包括向块添加自定义 src 特征。
非常感谢。实际上，我输入了错误的 src。然后我使用 iframely 输入 src 并且它工作。再次感谢！