如何在 Grapesjs 中添加 iframe？

Question

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

有没有像grapesjs 附带的youtube 块这样的iframe 块？

Answer 1

据我所知，目前还没有一个好的grapesjs iframe 插件。如果您的用例很简单，您可以创建自己的 iframe 块，其中包含您需要的信息：var editor = grapesjs.init({...});var blockManager = editor.BlockManager;blockManager.add('iframe', {&nbsp; label: 'iframe',&nbsp; content: '<iframe src="<your iframe src here>"></iframe>',});例如，如果您想要一个具有可自定义 src 特征的 iframe 组件，您可以这样做：var editor = grapesjs.init({...});editor.DomComponents.addType("iframe", {&nbsp; &nbsp; isComponent: el => el.tagName === "IFRAME",&nbsp; &nbsp; model: {&nbsp; &nbsp; &nbsp; &nbsp; defaults: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "iframe",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; traits: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "text",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "src",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "src"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }});editor.BlockManager.add("iframe", {&nbsp; &nbsp; label: "iframe",&nbsp; &nbsp; type: "iframe",&nbsp; &nbsp; content: "<iframe> </iframe>",&nbsp; &nbsp; selectable: true});这是一个有效的代码框： https ://codesandbox.io/s/grapesjs-o9hxu如果您需要更多自定义选项，您可以学习如何使用文档创建自定义块和组件：https://grapesjs.com/docs/modules/Blockshttps://grapesjs.com/docs/modules/Componentshttps://grapesjs.com/docs/modules/Traits