Joomla! 3, TinyMCE - Stop Removing Empty Tags

Category: Joomla!
 

TinyMCE removes empty tags before saving an article in Joomla!. But sometimes, this is very problematic feature because empty tags are commonly used. They are used for preloading images, for displaying icons (icons rendered by fonts), ajax, etc.

 

Example:


You want to store the following HTML code in your TinyMCE editor:

 

<div class="glyphicon glyphicon-star"></div>

 

to display an icon on your site. When you save the article, TinyMCE removes this tag, because it is empty. Of course, you can add &nbsp; inside the tag, which is in fact "alias" for empty space. In this case, TinyMCE will not remove the tag but the icon will be moved to left. When you use large icon and it is e.g. centered, then this is a problem because it will be moved far from the center.

 

To make an exception for empty divs, go to your Joomla! administration: Extensions - Plugin Manager - click on edit Editor - TinyMCE. In plugin options set the following value:

div[*]

for the parameter: Extended Valid Elements. Now, empty tags will be not more removed.