Rich text editor CustomConfig options

Questions
1

Hello everybody,

I have a few questions about setting up the Rich text editor, I have gone through the documentation in the linked below, but am wondering two things

  1. Is it possible to setup the default stylesheet via appsettings? something like

“CustomConfig”: {
“stylesheets”: “/css/DefatultRteStyle.css”
}

  1. Is it possible to setup the editor like this with a stylesheet? (with headers before the list of headings)

image
image987×635 31.9 KB

Kind regards,

2

Hi @jeroenVanKempenIo

It isn’t possible to setup a default stylesheet via appsettings unfortunately it has to be set up in the CMS as per Rich Text Editor Styles | Umbraco CMS

If your wanting to retain the nested list style for editors I found it easiest to use the style_formats app setting as per Rich text editor settings | Umbraco CMS.

This allows you to adds your default formats for your RTEs and you can also apply specific classes for different element types.

For example, this json (would need encoding) will add the headers along with a seperate nested list for custom list styles.

[
  {
    "title": "Headers",
    "items": [
      {
        "title": "Heading 2",
        "block": "h2"
      },
      {
        "title": "Heading 3",
        "block": "h3"
      },
      {
        "title": "Heading 4",
        "block": "h4"
      },
      {
        "title": "Heading 5",
        "block": "h5"
      },
      {
        "title": "Heading 6",
        "block": "h6"
      }
    ]
  },
  {
    "title": "Lists",
    "items": [
      {
        "title": "Tick Bullet list",
        "selector": "ul",
        "classes": "tick"
      }
    ]
  }
]

Output:

image
image421×288 9.66 KB

1 Like
3

Thanks for the response @jawood1 just a follow up question on that, is it then possible to include the css/style in style_formats or can that work together with a stylesheet?We want to show the styling of how it would look like on the site

4

Hi @jeroenVanKempenIo I believe it is possible to apply styles directly into the json, from my recollection it works off the tinymce format as per Content formatting options | TinyMCE Documentation.

However, I can imagine if you have a lot it could get pretty horrible to maintain. Though, I think you could load them into the appsetting on startup as per this blog Formatting for RichTextEditor config

It is also possible to have an attached stylesheet as long as it doesn’t contain the /*umb_name:Test/ declarations against your elements it shouldn’t override the format set in your app settings.

5

@jawood1 thanks for the help!

I have solved it this way

      "RichTextEditor": {
        "CustomConfig": {
          "style_formats": "[{\"title\":\"Headers\",\"items\":[ {\"title\":\"Heading 2\",\"block\":\"h2\"}, {\"title\":\"Heading 3\",\"block\":\"h3\"}, {\"title\":\"Heading 4\",\"block\":\"h4\"}, {\"title\":\"Heading 5\",\"block\":\"h5\"}, {\"title\":\"Heading 6\",\"block\":\"h6\"} ]}, {\"title\":\"Text\",\"items\":[ {\"title\":\"Paragrapgh\",\"block\":\"p\"}]}]",
          "content_css": "/css/DefatultRteStyle.css"
        }
      }
1 Like