BUG: iframe does not save src / does not recognize iframes after load
Question
Version:
0.17.4
Are you able to reproduce the bug from the demo?
- Yes
- No
What is the expected behavior?
- After inserting an iFrame that the src will be returned when using
editor.getHTML() - When loading a page that iframes will be recognized as iframe component and become editable again
Describe the bug detailed
Am adding the option for users to insert an iframe based on the map component. However, after setting the src the editor.getHTML() only returns the iframe tags with the id and class.
Any existing iframes are not recognized as iframe component and are not selectable/editable after loading back into canvas.
With the code below I am able to add iframes to the canvas like the map component does and edit the src trait, which then updates the iframe correctly and shows the page defined in src. When checking code in developer panel it has src set correctly, but editor.getHTML() only returns <iframe frameborder=\"0\" id=\"i92w\"></iframe>.
My code:
this.editor.DomComponents.addType('iframe', {
isComponent: el => {
let result = '';
if (el.tagName === 'IFRAME' && !/maps\.google\.com/.test(el.src)) {
result = {type: 'iframe', src: el.src};
}
return result;
},
model: {
defaults: {
type: 'iframe',
void: 0,
tagName: 'iframe',
src: '',
attributes: {frameborder: 0},
traits: [
{
label: 'Source',
name: 'src',
placeholder: 'https://example.com',
changeProp: 1
},
]
},
init() {
this.on('change:src', this.updateSrc)
},
updateSrc({view}) {
view.updateSrc();
}
},
view: {
tagName: 'div',
updateSrc() {
this.getIframe().src = this.model.get('src');
},
getIframe() {
if (!this.iframe) {
var ifrm = document.createElement('iframe');
ifrm.src = this.model.get('src');
ifrm.frameBorder = 0;
ifrm.style.height = '100%';
ifrm.style.width = '100%';
ifrm.className = this.ppfx + 'no-pointer';
this.iframe = ifrm;
}
return this.iframe;
},
onRender({el}) {
el.appendChild(this.getIframe());
}
}
})
bm.add("iframe", {
label: "iframe",
category: 'Extras',
content: {
type: 'iframe',
style: {height: '350px', width: '100%'},
src: '',
},
selectable: true
})
Are you able to attach screenshots, screencasts or a live demo?
- Yes (attach)
- No
Answers (1)
I'll add iframe support in the next release
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3018
Page refresh preventing after click on import
Version: 0.15.9 Are you able to reproduce the bug from the demo? Yes What is the expected behavior? Don't refresh the page after clicking o...
Issue #3454
BUG: RTE insert link does not update DOM
Version: "0.17.3" Are you able to reproduce the bug from the demo?[X] Yes[ ] No What is the expected behavior? After inserting link using d...
Issue #3316
BUG: The editor does not remove the dead script blocks
Version: 0.16.34 Are you able to reproduce the bug from the demo? [ ] Yes [x ] No As I understand the code import dialog skips all the HTML...
Issue #3731
BUG: Text element not able to be selected twice after extended with events
Version: 0.17.25 Are you able to reproduce the bug from the demo?[ ] Yes[x] No What is the expected behavior? Update a existing component o...
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.