Your browser (Internet Explorer 6) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.

Enabling HTML5 elements in TinyMCE for MODx

You might have also encountered the problem where TinyMCE in MODx strips off all your HTML5 tags when you are using the HTML mode. I encountered this on the latest job I was working on. I realised whenever I use tags like <blockquote>, <article>, <figure>, <figcaption> and <div data-item="">, they are all stripped out of the output and this got me crazy.  I did few research and I got how to extend it to allow for all these tags.

By default TinyMCE does not allow any of these new elements. 

Locate the config file for TinyMCE, and update the mce_extended_valid_elements variable to include the elements you need.

The config file is located:
In Evo: 'assets/plugins/tinymce/js/xconfig.js'
In Revo: 'assets/components/tinymce/xconfig.js'

You add the name of the element, plus any attributes that should be allowed. Multiple elements are added separated by a comma. Details on how to add elements are here.

		var mce_extended_valid_elements = "figure[class],figcaption";

It can be also helpful to refer to the docs for the standard valid_elements, as this describes how the rules are applied in more detail:

Also, if you are having trouble getting this to work, check you have emptied your browser cache since making the change.


Thanks to christianhanvey who helped out with his tips on MODx forum

comments powered by Disqus