Issue #3491Opened May 27, 2021by TheDude700 reactions

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?

  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

Answers (1)

artfJune 12, 20210 reactions

I'll add iframe support in the next release

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.