6

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="https://www.youtube.com/embed/Qjnc0H8utks" frameborder="0" allowfullscreen></iframe>

I immediatley click toggle editor > it appears like this;

<p>&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/Qjnc0H8utks" 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

    iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder]

  • 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!

Improve this question
2

2 Answers 2

Reset to default
5

Maybe I misunderstand your question, but you say:

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

and

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.

Improve this answer
3
  • Thanks @johanpw I was doing it the other way round (I was toggling the editor after pasting) - feel very silly! I suppose I expected the editor to be more intuitive. Well spotted and thank you :)
    – jonboy
    Commented Nov 17, 2015 at 8:30
  • I have the same problem. it works as u said. but after saving, Iframe tag gets cut out again
    – kiasaty
    Commented Sep 25, 2017 at 15:27
  • Wish there was a way just to do this normally but it puts quotes around it and it doesn't work
    – Eoin
    Commented Sep 29, 2017 at 12:46
3

I had a lot of trouble with this until I realised you have to select the correct TinyMCE panel set before editing the Prohibited elements. Choose the set that is assigned to administrator and editor.

[1]

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.