Issue #845πŸ’¬ AnsweredOpened February 7, 2018by chiqui3d1 reactions

Impossible to select Iframe

Quick answerby artf❀ 1

Hey @chiqui3d try to copy the view logic from the ComponentMapView. Basically you're not able to select it because everything inside it is overlapping the iframe element itself (elements inside iframe are out of the editor's scope). As you see from the Map, basically you have to wrap the iframe inside a div and disabl...

Read full answer below ↓

Question

I've created a new type of component an general iframe, avoiding selecting the map, but when I try to select it in canvas so that the settigns appear it's impossible for me.

This is the component code.

comps.addType('myiframe', {
        model: defaultModel.extend({
            defaults: Object.assign({}, defaultModel.prototype.defaults, {
                'custom-name': "IFRAME",
                tagName: 'iframe',
                src: "",
                traits: ['name', 'id', {
                    type: 'text',
                    label: 'src',
                    name: 'src',
                    changeProp: 1
                }],

            }),
        }, {
            isComponent(el) {
                var result = '';
                if (el.tagName == 'IFRAME' && /http/.test(el.src) && !/map/.test(el.src)) {
                    result = { type: 'myiframe', src: el.src };
                }
                return result;
            },
        }),
        view: defaultType.view,

    });

Answers (3)

artfβ€’ February 8, 2018

Hey @chiqui3d try to copy the view logic from the ComponentMapView. Basically you're not able to select it because everything inside it is overlapping the iframe element itself (elements inside iframe are out of the editor's scope). As you see from the Map, basically you have to wrap the iframe inside a div and disable pointer events (via gjs-no-pointer class) otherwise the div will be overlapped too

chiqui3dβ€’ February 8, 2018

OK, but then I can never edit the previously created iframe src, or I can do is create a div envelope with editor on load in the view, for iframe elements not created from grapesjs, right?

thanks @artf

lock[bot]β€’ September 18, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.