TinyMCE formatting in Umbraco 9

How to add custom formatting in TinyMCE in Umbraco 9

In Umbraco 8 you could add custom formatting in to TinyMCE, the RichText Editor that comes with Umbraco via the TinyMceConfig.config file and Nik Rimington wrote a really handy blog about how to do that.

In Umbraco 9, you need to do it slightly differently. You need to add your custom styling to the appsettings.json file which should be located on the root of your project. 

In my example, I want to add a span around a word and give it a class of underscore. To do this, I added the RichTextEditor section to to my appsettings.json file. I've left the Hosting section in my example to help you locate where I placed my custom config. 

"CMS": {     
      "Hosting": {
        "Debug": false
      },
      "RichTextEditor": {
        "CustomConfig": {
          "style_formats": "[{\"title\":\"Underscore\",\"inline\":\"span\",\"classes\":\"underscore\"}]"
        }
      },

Within the CMS, on an Rich Text Editor, I now have a dropdown option of Underscore and it applies my styling to a word I highlight, as shown in the animation below:

enter image description here

Hope you find this helpful.

Published on: 27 April 2022

Owain Williams

Owain is a multi awarded Umbraco MVP and co-hosts the Edinburgh Umbraco Users Group and the Edinburgh .Net Meetup. He is also part of the Umbraco Core Collaborators team and a .Net Develper at Spindogs.

https://www.twitter.com/scotishcoder