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)
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
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
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.
Issue #1959
[Question] Edit innerHTML in a custom button
Hi All, I am trying to change the text in a button component, but I am not able to edit it. I added this type: I included the editable: tru...
Issue #709
isComponent is not returning trait
Happy new year! I am having an issue with isComponent(). Here is my code: For some reason the only time the trait shows up in component set...
Issue #1148
Script in component get messed up, any idea?
I created a component like const TWITTERTYPE = 'TWITTER'; domc.addType(TWITTERTYPE, { model: defaultModel.extend({ defaults: { ...defaultMo...
Issue #1891
Can't create new button component
I'm having a hard time creating a new component for a <button> element. What am I missing? Is something bugged out here? Works fine if I ch...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.