How to Add an IFRAME in a Joomla 3.x Article

May 27, 2013

Joomla

Joomla 3

Do you have the following question?

How can I add an IFRAME to a Joomla Article?

If you have the above question and wish to know the answer, you are in the right place. Here in this tutorial I am giving you the step by step instructions so you can easily able to add any IFRAME content in the body section of your Joomla article. Here I am used Joomla 3.1 as reference. But this tutorial is also valid for Joomla 2.5 and all upcoming release of Joomla 3.x.

By default Joomla uses one editor called “TinyMCE“. In default configuration setting of Joomla 2.5 & Joomla 3.x the IFRAME content is not allowed in the article body. If you put some IFRAME code in the editor (i.e. “TinyMCE editor”), the editor automatically strips those codes form the content. So by default you can not able to save your IFRAME code in the article body.

Now, if you make some small changes in some configuration in Joomla Admin panel then you can overcome this restriction. Basically there are 2 sections in admin panel where you need to change some settings.

The First section is “The settings page of your Joomla Editor” where you need to restrict the editor so it will not strip or remove the IFRAME code . The editor settings page is varies from editor to editor. As the default editor of Joomla is “TinyMCE editor“, here I am listing the steps for that editor only. If you are using some other editor then check the configuration by your own. If you need any help just comment in this article and I will surely help you.

The Second section is “The ‘Text Filters’ section of Global Configuration” where you need to allow one or more user group so they can able to add some blocked HTML codes like IFRAME. I personally recommend you to allow this option to only the ‘Super Users‘ group.

Quick Note: Although the below steps are shown for Joomla 3.1, you can use the same steps in any Joomla 2.5 and Joomla 3.x website or may be in the higher version.

Steps to “Allow IFRAME in the TinyMCE Editor”:

Step 1: Login to your Joomla Admin Panel.

Step 2: Go to “Extensions” => “Plug-in Manager” from the top menu.  (As shown in below picture).

j3 Iframe in article pic 2

Click to Enlarge

Step 3: On the Plug-in Manager page you can find one drop-down “Filter” option called  “Select Type“. From the drop-down list choose “editors“. (As shown in below picture).

j3 Iframe in article pic 1

Click to Enlarge

Step 4: Now the Plug-in Manager page will list all available editors. From the list click on the “Editor – TinyMCE“. (As shown in below picture.)

j3 Iframe in article pic 3

Click to Enlarge

Step 5: Now on the edit page go to “Basic Options” tab. Under the “Basic Options“, almost at the bottom, you can find one option called “Prohibited Elements“. You can see “iframe” is listed here. Remove “iframe” from that field. Then click on the “Save & Close” button at the top to save your changes and close the edit section. (Check the below picture for better reference.)

j3 Iframe in article pic 5

Click to Enlarge

That’s all for the “TinyMCE Editor” settings. Now your editor is configured so it will not remove the IFRAME code.

Steps to “Allow IFRAME in the Global Configuration”:

Step 1: If you logged off from admin panel of Joomla then please login again.

Step 2: Go to “System” => “Global Configuration” from the top menu. (As shown in below picture.)

j3 Iframe in article pic 6

Click to Enlarge

Step 3: Now on the Global Configuration page, click on the “Text Filters” tab. Under the “Text Filter Settings“, set “Filter Type” to “No Filtering” for the “Super Users” user group. Then click on “Save & Close” button at the top to save the changed settings. (Check the below picture for better reference.)

j3 Iframe in article pic 7

Click to Enlarge

That’s all for the “Global Configuration Settings“. Now the Global Text Filters also ready to allow the IFRAME code for “Super Users“. I personally recommend you to allow this option to only for “Super Users” user group. But if you need it for some other groups then you are fine to do the same for those groups also.

If you face any kind of problem to set the above options, feel free to ask your question using the below comment form. I will surely try to help you as soon as possible.

[Total: 2    Average: 5/5]
How to Add an IFRAME in a Joomla 3.x Article written by Souvik Banerjee average rating 5/5 - 2 user ratings
, , , , , , , , , , , ,

About Souvik Banerjee

Web Developer and SEO Specialist with 10+ years of experience in open source web development. He is also the moderator of this blog (www.rswebsols.com)

View all posts by Souvik Banerjee

Related Posts

8 Responses to “How to Add an IFRAME in a Joomla 3.x Article”

  1. d4v1d Says:

    A lot of us don’t use TinyMCE – we use JCE instead. (There are a *lot* of very good reasons for this). What is your advice there? And swapping editors isn;t realistic – we can’t expect our clients to be toggling editors.

    Reply

    • Souvik Banerjee Says:

      JCE is a really nice editor and you can surely use it in your client’s website. It is much more feature rich than TinyMCE. But you know, still most of Joomla users always use it’s default editor (i.e. TinyMCE).

      Reply

  2. Henrik Says:

    Hi

    I have joomla 3.3.3, and as far as I can see, the settings in TinyMCE and Global configuration should allow html-tags, but when I insert html-tags, they are stripped, when I save.

    TinyMCE: only script,applet,iframe are not allowed
    Global configuration: no text filter for super user

    Can you help me?

    Regards, Henrik

    Reply

    • Souvik Banerjee Says:

      Your configuration is just fine. There is no reason for your editor to strip html tags (except script,applet,iframe).

      Try one thing, after inserting your html content in the editor, before saving the article, just click on the “Toggle Editor” button for 1 or 2 times. Then save your article. This may work.

      Reply

  3. Leslie Green Says:

    Using JCE editor, I have problems, Tiny works fine. I had all these settings correct, yet when I toggle to WYSIWYG editor the disappears. If I go back to code editor it is gone. Using joomla 3.3.3 .

    Reply

  4. Gérard Laloux Says:

    Hi,
    I try to do the same with JCE Editor (2.3.4). Could you tell the right method ?

    Have a nice day

    Gerard

    Reply

  5. johnab Says:

    I already have this issue,now i add iframe in joomla article with the help this tutorial,thanks for this info.

    Reply

Leave a Reply