Copied to clipboard

Flag this post as spam?

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


  • Roy Berris 67 posts 490 karma points c-trib
    Jul 02, 2022 @ 11:38
    Roy Berris
    0

    Hi, is there any way to extend the rich text editor and add your own shortcuts. Like the B shortcut will surround the selection with strong tags. I'd like to create my own shortcut that will surround a selection with a span and a given class.

  • Huw Reddick 841 posts 2869 karma points
    Jul 02, 2022 @ 13:14
    Huw Reddick
    0

    I'm also struggling with this, in Umbraco 8 I was using the style_formats custom config but have so far failed to get it to work in Umbraco 9 :(

    This is an example of what I had in 8

       <customConfig>
           <config key="style_formats">
                    [
                    {
                    "title":"Headings",
                    "items":[
                    {
                    "title":"Top Heading",
                    "block":"h1"
                    },
                    {
                    "title":"Heading h2",
                    "block": "h2"
                    },
                    {
                    "title":"Sub Head h3",
                    "block":"h3"
                    },
                    {
                    "title":"Heading h4",
                    "block":"h4"
                    },
                    {
                    "title":"Heading h5",
                    "block":"h5"
                    },
                    {
                    "title":"Heading h6",
                    "block":"h6"
                    }
                    ]}
            ]
            </config>
        </customConfig>
    

    I tried the same thing in 9 but it throws an error in the backoffice, An error occurred Cannot create instance of type 'System.String' because it is missing a public parameterless constructor.

    "CustomConfig": {
      "style_formats": [
        {
          "title": "Headings",
          "items": [
            {
              "title": "Top Heading",
              "block": "h1"
            },
            {
              "title": "Heading h2",
              "block": "h2"
            },
            {
              "title": "Sub Head h3",
              "block": "h3"
            },
            {
              "title": "Heading h4",
              "block": "h4"
            },
            {
              "title": "Heading h5",
              "block": "h5"
            },
            {
              "title": "Heading h6",
              "block": "h6"
            }
          ]
        }
      ]
    }
    
  • Roy Berris 67 posts 490 karma points c-trib
    Jul 02, 2022 @ 13:17
  • Huw Reddick 841 posts 2869 karma points
    Jul 02, 2022 @ 13:19
    Huw Reddick
    0

    Ha Ha, just found that myself :D

    That is going to look very nasty and unmaintainable for a large config section like I have.

  • Roy Berris 67 posts 490 karma points c-trib
    Jul 02, 2022 @ 13:20
    Roy Berris
    0

    Do you perhaps have the link on the tinyMce documentation on how this works and how I can configure my own tags in there?

  • Huw Reddick 841 posts 2869 karma points
    Jul 02, 2022 @ 13:25
    Huw Reddick
    0

    What exactly do you need to do?

  • Huw Reddick 841 posts 2869 karma points
    Jul 02, 2022 @ 13:40
    Huw Reddick
    101

    Hi Roy,

    Based on your inital question, you can do the following

      "Umbraco": {
          "RichTextEditor": {
            "CustomConfig": {
              "style_formats": "[{\"title\": \"Red text\",\"inline\": \"span\",\"classes\": \"red\"}]"
            }
          },
          "WebRouting": {
            "DisableRedirectUrlTracking": true
          }
        }
      }
    

    This will give you an entry under 'Formats' that will wrap your selection in a span with the class red enter image description here

  • Huw Reddick 841 posts 2869 karma points
    Sep 27, 2022 @ 16:43
    Huw Reddick
    1

    I have now set mine to do set the style_formats automatically while allowing me to use a nice json file to maintain it in. Instructions in the link below

    https://umbraco.themediawizards.co.uk/the-grimoire/formatting-for-richtexteditor-config/

Please Sign in or register to post replies

Write your reply to:

Draft