Generate TinyMCE style config for Umbraco CMS.
When using the Rich Text Editor datatype in Umbraco, the formatting dropdown options are configurable, letting editors apply styles to their WYSIWYG content. The WYSIWYG editor is powered by TinyMCE.
Styling options in the dropdown can be configured as a simple list:
…or grouped (the default configuration in some versions of Umbraco):
The TinyMCE JSON configuration code for generating these options is added to the appSettings.json file in your Umbraco project. See TinyMCE and Umbraco docs for more details.
"Umbraco": { "CMS": { "RichTextEditor": { "CustomConfig": { "style_formats": "[{\"title\":\"Page Header\",\"block\":\"h2\"},{\"title\":\"Section Header\",\"block\":\"h3\"},{\"title\":\"Paragraph Header\",\"block\":\"h4\"},{\"title\":\"Quote\",\"block\":\"quote\"}, {\"title\":\"Code\",\"block\":\"code\"}]" } } } }
This tool offers a simple interface to build single and grouped formatting options and creates the style_formats configuration code for you, handling string escaping and removing white-space/line-breaks so you can copy the code and paste it directly into your appSettings file.
If you'd still prefer to manage the configuration in code you might want to check out the Umbraco RTE StyleFormats package.