Adding functionality to the TinyMCE editor in Umbraco

Published on Friday, September 4, 2015

Popped up a new problem when I was working with the TinyMCE editor in Umbraco, a client of ours needed extra functionality for the TinyMCE editor which wasn't provided by default in the settings for the Rich-text datatype.

A quick solution to add font color, font family and font size functions to the TinyMCE menu is to add the three snippets below to config/tinyMceConfig.config.

<!-- Font color selector tool -->
    <tinyMceCommand value="" userInterface="true" frontendCommand="forecolor">forecolor</tinyMceCommand>

<!-- Font family selector tool -->
    <tinyMceCommand value="" userInterface="true" frontendCommand="fontselect">fontselect</tinyMceCommand>

<!-- Font size selector tool -->
    <tinyMceCommand value="" userInterface="true" frontendCommand="fontsizeselect">fontsizeselect</tinyMceCommand>

Notice that you may have to restart your Umbraco installation before the changes take effekt. You can simply restart it by adding a space inside the web.config and saving it.

Also note that the icon referred in the "icon" tag for the font size and font family may not exist and will therefor be missing in the datatype settings page. But they will not be needed for the editor as they will be displayed as dropdown lists (see below).


After the above changes have been added to the tinyMceConfig.config file the new functions should be selectable in the datatype configuration.


comments powered by Disqus