There are two ways to add custom styles to the TinyMce Style Formats dropdown in Umbraco.
The first way that you've found is to associate a stylesheet with the Rich Text Editor, and this creates comments in the CSS file that are used to define the dropdown options - but lacks the ability to group styles into menus.
The second way, is via custom TinyMce configuration, Umbraco allows you to pass the standard config options of TinyMce into Umbraco's implementation via a 'CustomConfig' setting, and TinyMce allows you to group options on the dropdown, using a json format.
The old Umbracov7/V8 documentation has a good description of how this works and what the configuration should look like:
However in V10 the tinymce is configured in a different way via appsettings.json - there is the same example as V7/V8 documentation, but it's not quite so clear, what is going on... eg the JSON has to be all on one line!
With this second approach the downside is it applies to all Rich Text Editor instance with the style format dropdown available, and you might want to have different dropdowns for different Rich Text Editors in your site.
The upside is the styles are contextual, so if you have a style rule to make an anchor link look like a button, those styles are only applicable to an anchor link...
Ironically I found this thread when trying to locate the Umbraco documentation on how to configure tinyMCE style_formats so that I could include it in the documentation of my TinyMCE/Umbraco configurator. The only information I can find around TinyMCE in the Umbraco docs doesn't seem to detail the style_formats configuration and the page which presumably did document it no longer exists: https://docs.umbraco.com/umbraco-cms/reference/configuration/richtexteditorsettings.
My configurator allows the config to be generated via a simple GUI and handles the JSON string escaping and white-space removal which normally makes this difficult to manage by hand. I hope it helps some folks.
but in v14 - I believe, though I haven't had a chance to do a deep dive yet, that you can no longer configure TinyMCE globally through appsettings, but I think there might be a way on each instance to add specific TinyMCE configuration.
Anyway that's why you get a blank page when you visit the link as it's default to V14, and I don't think it has that functionality in this way anymore.
Ah-ha! That makes sense, thanks Marc! I've added the link to my configurator, and am preparing to throw it all in the bin as soon as v14 gains wide adoption (which will be a good thing if it means RTE's can be individually configured) :)
How to create submenus for RTE Frormat styles.
I have a lot of styles in the css file. How I can group by name this styles like in the picture?
I have css file like this:
How to create 2 submenus "Sizes" and "Weights"
Hi Vyacheslav
There are two ways to add custom styles to the TinyMce Style Formats dropdown in Umbraco.
The first way that you've found is to associate a stylesheet with the Rich Text Editor, and this creates comments in the CSS file that are used to define the dropdown options - but lacks the ability to group styles into menus.
The second way, is via custom TinyMce configuration, Umbraco allows you to pass the standard config options of TinyMce into Umbraco's implementation via a 'CustomConfig' setting, and TinyMce allows you to group options on the dropdown, using a json format.
The old Umbracov7/V8 documentation has a good description of how this works and what the configuration should look like:
https://our.umbraco.com/Documentation/Reference/Configuration-for-Umbraco-7-and-8/tinyMceConfig/#style-formats
However in V10 the tinymce is configured in a different way via appsettings.json - there is the same example as V7/V8 documentation, but it's not quite so clear, what is going on... eg the JSON has to be all on one line!
https://docs.umbraco.com/umbraco-cms/reference/configuration/richtexteditorsettings#examples
With this second approach the downside is it applies to all Rich Text Editor instance with the style format dropdown available, and you might want to have different dropdowns for different Rich Text Editors in your site.
The upside is the styles are contextual, so if you have a style rule to make an anchor link look like a button, those styles are only applicable to an anchor link...
regards
Marc
Thank you for your answer!
Indeed, I should use custom config for this.
I added
but there is no my styles anyway =(
Could you please review my config? May be I shoud change something in the default config tag?
Ironically I found this thread when trying to locate the Umbraco documentation on how to configure tinyMCE
style_formats
so that I could include it in the documentation of my TinyMCE/Umbraco configurator. The only information I can find around TinyMCE in the Umbraco docs doesn't seem to detail thestyle_formats
configuration and the page which presumably did document it no longer exists: https://docs.umbraco.com/umbraco-cms/reference/configuration/richtexteditorsettings.My configurator allows the config to be generated via a simple GUI and handles the JSON string escaping and white-space removal which normally makes this difficult to manage by hand. I hope it helps some folks.
Hi Dan
TinyMCE/Umbraco configurator is a great name.
The documentation is still there for v10-v13
https://docs.umbraco.com/umbraco-cms/v/10.latest-lts/reference/configuration/richtexteditorsettings
but in v14 - I believe, though I haven't had a chance to do a deep dive yet, that you can no longer configure TinyMCE globally through appsettings, but I think there might be a way on each instance to add specific TinyMCE configuration.
Anyway that's why you get a blank page when you visit the link as it's default to V14, and I don't think it has that functionality in this way anymore.
regards
Marc
Ah-ha! That makes sense, thanks Marc! I've added the link to my configurator, and am preparing to throw it all in the bin as soon as v14 gains wide adoption (which will be a good thing if it means RTE's can be individually configured) :)
is working on a reply...