Search code examples
iframetinymcefacebook-instant-articles

TinyMCE iframe encodes contents


Inserting an iframe into TinyMCE with HTML contents rather than a src attribute encodes everything and breaks the contents.

Eg: inserting this via the View Source or Embed plugin:

<iframe><p>hello</p></iframe>

Will result in this when you view the Source again:

<iframe width="300" height="150" data-mce-fragment="1">&amp;lt;P&amp;gt;hello&amp;lt;/p&amp;gt;</iframe>

Is there any way to stop this or a setting in the init which causes this?

If anyone wonders why I would need this over using a src, it's because I'm trying to format articles for Facebooks's new Instant Article thing which requires embedded posts/tweets etc to be wrapped in a <figure><iframe>[code]</iframe></figure> format.


Solution

  • I figured out why this happened as I was trying to narrow down the problem by testing it out on fiddle.tinymce.com. This encoding issue didn't happen on the fiddle, so I stripped back my own init thinking it was maybe the codemirror plugin, but it turned out to be the fontawesome 2.0.6 plugin (it's now on 2.0.8 but I couldn't get that version to work so am unsure if it has changed the way it works since 2.0.6).

    The plugin does a var content = parser.parseFromString(e.content, 'text/html'); on BeforeSetContent and GetContent to do some nonEditable class changes. This caused certain HTML elements to become encoded in the source code.

    Long story short, I removed the parser and modified the plugin and my problem is solved!