Editor stripping iframe

Theodore: 2 weeks ago

Yes, another question about the stripping of HTML tags (this time TinyMCE).

Joomla 3.4.1 / TinyMCE 4.1.7

This should be very simple, however due to the number of comments and questions/answers I see already presumably I'm not the only one facing this issue. There's a similar question here ( however I don't think the accepted answer is a resolution (very good work around though).

My issue though is only with iframes. The process is as follows;

I copy some youtube embed code > paste it into TinyMCE editor > it appears like this;

<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

I immediatley click toggle editor > it appears like this;

<p>&lt;iframe width="560" height="315" src="" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</p>

Things I have tried so far;

  • removed iframe from TinyMCE prohibited elements in plugin settings
  • set no filtering for super user in global settings
  • Pasted the following code in TinyMCE Extended Valid Elements


  • cleared joomla cache

  • cleared browser cache
  • tried various browsers
  • tried various templates

The iframe works when using no editor or CodeMirror however they aren't options, I have to use TinyMCE on this occasion.

Any ideas what's going on? I'm lost!

Jace: 2 weeks ago

Maybe I misunderstand your question, but you say:

I copy some youtube embed code > paste it into TinyMCE editor > it appears like this


I immediately click toggle editor > it appears like this;

Please note that if you paste HTML code in the regular TinyMCE window, it will be converted to HTML entities (< becomes &lt;, > becomes &gt; and so on).

You have to do it the other way around: First click Toggle editor, then paste your code, and toggle editor again. This is when TinyMCE will clean up your code if needed, and in your case remove the <iframe> element for two reasons:

  1. Because by default, iframe is listed as Forbidden element in the plugin settings (as you mentioned).
  2. Because empty tags are removed by default (there's no content between the opening <iframe> tag and the closing </iframe>. This is of course correct for iframes, but to TinyMCE it's just an empty tag, thus not needed.

I did a quick test, and with the following settings in the TinyMCE plugin settings it should work:

  1. Remove iframe from the list of prohibited elements
  2. Add iframe[*] to the "Extended Valid Elements" list:

TinyMCE settings to allow iframes

Save and close. Now edit your article, click the "Toggle editor" button, and paste your code. After clicking "Toggle editor" again, you should see something like this:

Working iframe in TinyMCE

Save your article, click "Toggle Editor" again, and verify that your iframe code is still intact.

Hope this works.