BUG: iframe does not save src / does not recognize iframes after load

[TheDude70]

Version:

0.17.4

Are you able to reproduce the bug from the demo?

• Yes
• No

What is the expected behavior?

1. After inserting an iFrame that the src will be returned when using editor.getHTML()
2. 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

[artf]

I'll add iframe support in the next release