[TIP] Enabling HTML5 elements in TinyMCE#

You might find that you need to allow some HTML5 elements in your TinyMCE editor, but by default it does not allow any of these new elements. Now, you are probably not going to want to be allowing editors to add elements like header,footer,section - these should probably be controlled in your template/snippet/chunks, but some elements it is nice to add this feature in. For instance, I wanted to be able to allow the figure and figcaption elements to be used to wrap images. Note: this is only possible if you use HTML mode, this is not an automatically added tag.

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.
http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements



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:
http://www.tinymce.com/wiki.php/Configuration:valid_elements

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

Nice tip. Thanks!

Hi,

I'm not able to locate the config file you're talking about.
It's now Tiny 4.32

Hi,

I'm not able to locate the config file you're talking about.
It's now Tiny 4.32

Thanks

Hi elz064,
which version of MODX are you using? And you have definitely installed TinyMCE?
I have a fresh install of v2.2.2 and Tinymce4.3.2 and the config file is definitely at:
'assets/components/tinymce/xconfig.js'

(I also notice that many HTML5 elements have now been added by default)

oh, I'm sorry I found it. Probably not looking the right folder. {: ((
However, with revo 2.22 and last Tiny I can actually see figureand figcaption are already included into the valid elements list.

But I just can add them to the select list to make them pickable in the select.
Same issue for strong tag which is now included into the valid list but no way to make it appears in the select .

I'm doing it by adding those tag in the tiny.theme_advanced_blockformats (system param) list.
This only add new blank lines into the select, but strictly nothing else.

How do you manage ??
Thank you