How to add iframe in Grapesjs?

user_13790657 0
Viewed 1131

I tried some plugins but wasn't able to follow along. Basically I want an iframe to add and preview podcasts and other things.

Is there any iframe block like youtube block which comes with grapesjs ?

grapesjs iframe html javascript
1 Answers

To my knowledge, there is not a good grapesjs iframe plugin that already exists.

If your use-case is simple, you can just create your own iframe block that has the information you need:

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

blockManager.add('iframe', {
  label: 'iframe',
  content: '<iframe src="<your iframe src here>"></iframe>',
});

If you'd like an iframe component with a customisable src trait, for example, you'd do it like this:

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
});

Here's a working codesandbox: https://codesandbox.io/s/grapesjs-o9hxu

If you need more customization options, you can learn how to create custom blocks and components using the docs:

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

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

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

user_119492780
Related