Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Vyacheslav 13 posts 113 karma points
    Apr 24, 2023 @ 11:14
    Vyacheslav
    0

    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"

  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    Apr 25, 2023 @ 12:16
    Marc Goodson
    1

    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

  • Vyacheslav 13 posts 113 karma points
    May 04, 2023 @ 07:08
    Vyacheslav
    0

    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>
    
  • Dan 1288 posts 3921 karma points c-trib
    Jun 13, 2024 @ 09:41
    Dan
    0

    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.

  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    Jun 13, 2024 @ 12:00
    Marc Goodson
    0

    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

  • Dan 1288 posts 3921 karma points c-trib
    Jun 13, 2024 @ 12:45
    Dan
    0

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

Please Sign in or register to post replies

Write your reply to:

Draft