4

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 ?

abhinav3414
  • 946
  • 3
  • 9
  • 31
Rahul
  • 43
  • 1
  • 4

1 Answers1

3

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

GiorgiosJames
  • 742
  • 7
  • 11
  • Thank, i got the iframe option in palette. But when I drag and drop, it automatically fires up a request (currenturl/%3Cyour%20iframe%20src%20here%3E) which leads to an error. Can you help? – Rahul Jun 23 '20 at 04:53
  • @Rahul you need to put your iframe source in where I've written "" (like a https:// URL to your video or podcast resource). I've also updated the answer to include adding a custom src trait to the block. – GiorgiosJames Jun 23 '20 at 11:37
  • thank you so much. Actually, I was entering wrong src. Then I entered src using iframely and it worked. Thanks again! – Rahul Jun 23 '20 at 14:00