extend rich text editor

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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 38 posts 375 karma points

Jul 02, 2022 @ 11:38

0

Extend Rich Text Editor

Using Umbraco And Getting Started

Umbraco 9

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.

Copy Link

Huw Reddick 651 posts 2141 karma points

Jul 02, 2022 @ 13:14

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"
        }
      ]
    }
  ]
}

Copy Link

Roy Berris 38 posts 375 karma points

Jul 02, 2022 @ 13:17

0

Hi, I didn't know this existed. But I found this answer: https://our.umbraco.com/forum/umbraco-9/106837-tinymceconfig-where-to-find-it-in-umbraco-9#comment-332731

Copy Link
Huw Reddick 651 posts 2141 karma points

Jul 02, 2022 @ 13:19

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.

Copy Link
Roy Berris 38 posts 375 karma points

Jul 02, 2022 @ 13:20

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?

Copy Link
Huw Reddick 651 posts 2141 karma points

Jul 02, 2022 @ 13:25

0

What exactly do you need to do?

Copy Link

Huw Reddick 651 posts 2141 karma points

Jul 02, 2022 @ 13:40

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

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?