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.

Using Umbraco And Getting Started

Umbraco 8

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 2141 posts 14344 karma points MVP 8x 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

is working on a reply...

Flag this post as spam?

How to create submenus for RTE Frormat styles.