Umbraco 11 changed the way that the config for tinyMCE RichTextEditor is consumed yet again as TinyMCE was upgraded to version 6.
The breaking name changes are listed in the migration page on TinyMCE.
Here's how to change the appsettings.json:
"Umbraco": {
"CMS": {
/* ... */
},
"RichTextEditor": {
"Commands": [
{
"Alias": "ForeColor",
"Name": "Change Color",
"Mode": "Selection"
},
{
"Alias": "fontfamily",
"Name": "Change Font Family",
"Mode": "Selection"
},
{
"Alias": "FontSize",
"Name": "Change Font Size",
"Mode": "Selection"
}
],
"CustomConfig": {
"content_css_cors": true,
"content_style": "@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Roboto&family=Great Vibes&family=Montserrat&family=Oswald&family=Lato&display=block'); body { font-size: 1em; }",
"entity_encoding": "raw",
"font_family_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; Great Vibes='Great Vibes',cursive",
"font_size_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_css": ""
},
"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 see will look like this:
