how to create submenus for rte frormat styles - Using Umbraco and getting started

Vyacheslav 13 posts 113 karma points

Apr 24, 2023 @ 11:14

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? enter image description here

I have css file like this:
enter image description here
How to create 2 submenus "Sizes" and "Weights"

Copy Link

Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib

Apr 25, 2023 @ 12:16

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

Copy Link

Vyacheslav 13 posts 113 karma points

May 04, 2023 @ 07:08

Thank you for your answer!
Indeed, I should use custom config for this.
I added

<config key="style_formats">

but there is no my styles anyway =(
Could you please review my config? May be I shoud change something in the default config tag?

<?xml version="1.0" encoding="utf-8"?>
<DataType Key="47ab957d-f317-474a-bb22-334067cbcc27" Alias="NewRichTextEditor" Level="2">
  <Info>
    <Name>NewRichTextEditor</Name>
    <EditorAlias>Umbraco.TinyMCE</EditorAlias>
    <DatabaseType>Ntext</DatabaseType>
    <Folder>RTE</Folder>
  </Info>
  <Config><![CDATA[{
  "Editor": {
    "toolbar": [
      "ace",
      "removeformat",
      "styleselect",
      "bold",
      "italic",
      "underline",
      "strikethrough",
      "bullist",
      "numlist",
      "link",
      "unlink"
    ],
    "stylesheets": [
    ],
    "maxImageSize": 500,
    "mode": "classic"
  },
  "OverlaySize": null,
  "HideLabel": false,
  "IgnoreUserStartNodes": false,
  "MediaParentId": null
}]]></Config>
    <customConfig>
        <config key="style_formats">
            [{"title":"Headers","items":[{"title":"Header 1 (H1)","block":"h1"},{"title":"H1 Lookalike","selector":"p,span","classes":"h1"},{"title":"Header 2 (H2)","block":"h2"},{"title":"H2 Lookalike","selector":"p,span","classes":"h2"},{"title":"Header 3 (H3)","block":"h3"},{"title":"H3 Lookalike","selector":"p,span","classes":"h3"}]},{"title":"Quotes","items":[{"title":"Style A","block":"blockquote","classes":"quote-a"},{"title":"Style B","block":"blockquote","classes":"quote-b"}]},{"title":"Links","items":[{"title":"CTA Loud","selector":"a","classes":"cta cta-loud"},{"title":"CTA Subtle","selector":"a","classes":"cta cta-subtle"},{"title":"Button look-a-like","selector":"a","classes":"btn btn-mimic"}]},{"title":"Inline colours","items":[{"title":"Orange","inline":"span","classes":"orange"},{"title":"Red","inline":"span","classes":"red"},{"title":"Blue","inline":"span","classes":"blue"}]}]
        </config>
    </customConfig>
</DataType>

Copy Link

Dan 1288 posts 3921 karma points c-trib

Jun 13, 2024 @ 09:41

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.

Copy Link

Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib

Jun 13, 2024 @ 12:00

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

Copy Link

Dan 1288 posts 3921 karma points c-trib

Jun 13, 2024 @ 12:45

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) :)

Copy Link

is working on a reply...

Flag this post as spam?

How to create submenus for RTE Frormat styles.