Umbraco 9 changed the way that the config for tinyMCE RichTextEditor is consumed. Adding in the basic 3 properties: font colour, font size and font family can trip up those new to .net core and those that are used to the old config files.
The biggest and most obvious change is that there is no longer a tinyMceConfig.config file in the config folder. That file was the key to making these changes in Umbraco 8. Umbraco hasn't left us high and dry though, the config has simply moved to the appsettings.json file.
In a post on our.umbraco user Sebastiaan Janssen gave the first clues needed to convert the old config to the new way:
With the door open adding the 3 properties of font colour, font size and font family is only a case converting from XML to json:
"RichTextEditor": {
"Commands": [
{
"alias": "forecolor",
"name": "Change Color",
"mode": "Selection"
},
{
"alias": "fontselect",
"name": "Change Font Family",
"mode": "Selection"
},
{
"alias": "fontsizeselect",
"name": "Change Font Size",
"mode": "Selection"
}
],
"CustomConfig": {
"entity_encoding": "raw"
},
"InvalidElements": "",
"Plugins": [
"textcolor",
"colorpicker"
],
"ValidElements": "*[*]"
}
This will allow you to enable these three options in the Settings > DataType > RichTextEditor in the back-office:
With those enabled the end product that content creators / writers will see looks like this:
Do note that in the above code sample I have made all elements valid and also changed the entity encoding to raw. Both of these properties can be removed, however since I will more than likely be coming back to this page to copy&paste this snippet I'm going to leave them in for my own selfish sake.
UPDATE 2021-11-22:
Adding font-size formats and different font-family's can also be achieved by updating the CustomConfig prop in the RichTextEditor JSON object:
"RichTextEditor": {
"CustomConfig": {
"entity_encoding": "raw",
"fontsize_formats": "0.25em 0.35em 0.5em 0.65em 0.75em .9em 1em 1.1em 1.25em 1.5em 1.75em 2em 2.25em 2.5em 3em 4em 5em 6em 7em 8em",
"font_formats": "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats; Lato Light=lato; Roboto=roboto; Oswald=oswald; Montserrat=montserrat",
"content_style": "@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Roboto&family=Montserrat&family=Oswald&family=Lato&display=swap'); body { font-size: 1em; }"
}
}