How to make TinyMCE Editor clear unwanted tags from content

The default Joomla editor gives the users the ability to filter the content copied from other programs such as Microsoft Office or Libre Office to the article without having weird classes or styles.

As a Super user or Administrator, login to the administration area of your website and navigate to Extensions > Plugins.

In the Search Field type Tiny MCE and press enter.

From the results, click the Editor - TinyMCE to enter the configuration page of the editor plugin.

From the plugin tab, you can view three Predefined Sets of Tiny MCE. On each Set there are specific settings that you can alter fitting your needs and users groups.

Select a Set and below you will find the Assign this Set to...

From this field you can set which user groups will bind to this set.

After you set your preffered user group (be careful not to set the same user group to more than one Set), you must set the Use Joomla Text Filter to Off setting so we can give the tags and attributes we want overriding default joomla settings.

As you can see in the image below there are 3 fields. Prohibited Elements, Valid Elements and Extended Valid Elements.

Prohibited Elements

Any tag given in the Prohibited Element separated by comma (,) is wiped on article save. So in this field type anything you want to be sure is cut off.

Valid Elements

In this field you must type all html tags you allow to the user separated by comma (,)

For example if we type: p,span,ul,li,a we give the user group the authorization to use ONLY those tags. Everything else will by copied as simple text.

Extended Valid Elements

In this field you can set which attributes are allowed to use. For example if we want to secure that p elements will get only style and id attributes we will type:

p[style|id]

If we want to secure that the style will be only text-align we must change the above to:

p[style=text-align|id]

As with the Valid Elements, we separate the html tags with comma (,) so with the below:

p[style=text-align|id],a[href|target|class='primary-link']

..we set that p tags can accept only text-align as their style, and they can have an id if provided, also the a tags can have the href,target and class attributes but the class attribute will force to have the class ".primary-link" even though it may not be provided by the user.

Hope to see the point and make your filters as you wish!

Advertising