How to stop Joomla! editor from cleaning some HTML elements?

While administrating Joomla! you may come across quite a common issue. After adding a custom HTML code in an article or a module, you may find out the HTML code is stripped out from some keay HTML tags once you saved the module/article. Especially, this issue applies to scripts (e.g. if you try to add Google Adsense on your website) or iframe and embed tags (e.g. if you try to add YouTube or Flash video).

1. Why Joomla remove some HTML code?

In Joomla configuration you can define different filtering options regarding the entered HTML code by members of each user group. It is a protection against markup commonly associated with website attacks. How to change these settings you will find out below.

2. Text filtering in Joomla

First of all, you should check which filter type is assigned to your user group. Go to Site -> Global Configuration -> Text Filters and you will see this page:

For Joomla 3.x (it looks similar for Joomla 2.5)

editor-filter-tags-J3

Make sure the Super Users and the Administrator group is set to No Filtering. It means that Joomla will not remove any code from article or module if you are the website administrator.

If you would like to assign the No Filtering filter type to other groups, simply choose the right option from the list next to the group name and click on the Save button:

editor-filter-tags2-J3

3. Joomla editor settings

If you are using a text editor in your Joomla! backend, you may need to change its settings in order to display all HTML tags that you wish. The default editor in Joomla is TinyMCE and we will focus on this plugin.

Go to Extensions => Plug-in Manager => Editor => TinyMCE and you will see the plugin parameters:

For Joomla 3.x (it looks similar for Joomla 2.5)

TinyMCE-editor-Joomla3

Choose the Extended functionality.

This way you will enable more features in the editor toolbar and you will be able to add embedded media as well. Secondly, you need to remove the HTML tags from the Prohibited Elements list. Do not leave this field empty, since the default tags will be restored after saving. Simply enter any dummy text as “empty” or whatever.

TinyMCE-editor-extended-Joomla3

Don’t forget to save the plugin settings. Now you should be able to add your custom HTML code to an article or module.