Issue #845Opened February 7, 2018by chiqui3d1 reactions

Impossible to select Iframe

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)

artfFebruary 8, 20181 reactions

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

chiqui3dFebruary 8, 20180 reactions

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, 20190 reactions

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.