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">&lt;P&gt;hello&lt;/p&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.
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!