Custom RTE format styles in appsettings not working in V13

Questions
1

Hi,

We are in the process of upgrading from v10.8.7 > v13.6 and I have been trying to get the RTE format custom styles to work. They were all fine in V10 and added to the appsettings.config like this:

        "CustomConfig": {
          "paste_as_text": "true",
          "style_formats": "[{\"title\": \"UL Dash List\",\"selector\": \"ul\",\"classes\": \"list-items-dash\"},{\"title\": \"OL Dash List\",\"selector\": \"ol\",\"classes\": \"list-items-dash\",\"attributes\": {\"type\": \"dash\"}},{\"title\": \"OL Dash Type\",\"selector\": \"ol\",\"attributes\": {\"type\": \"dash\"}}]"
        }

But in V13 they just don’t appear at all in the RTE format dropdown list. I have tried all kinds of variations for this but cannot get any to render. Does anyone have an example of this working for v13?

Thanks

2

Does this help?

I don’t know what version of tinymce are use in which Umbraco version, but there are upgrade links on this page: Rich Text Editor | Umbraco CMS.

3

Hi Chris,

Yea, it looks like this feature is broken in v13. I’ve just spun up a new v13 site and followed the example in the documentation, and it doesn’t work for me either…

I found this closed issue that mentions this breaking after 13.3.2: TinyMCE style settings ignored since at least 13.3.1 (potential regression?) ¡ Issue #16602 ¡ umbraco/Umbraco-CMS ¡ GitHub.
but the author closed it, citing it being caused by a different nuget package. (It’s probably worth opening a new issue for this on Umbraco’s GitHub.)

I also found this issue from v12, which may be related: RTE Style format change prevents using both appsettings and stylesheet in a single RTE ¡ Issue #14819 ¡ umbraco/Umbraco-CMS ¡ GitHub

Are you able to move your custom style formats into a backoffice defined RTE Stylesheet?

4

Since you’re coming from v10, just to check all the bases, does this fall under any of the migration tasks for upgrading from v4 → v6?

I have a working custom style formatting in a v13.4.1 as the following snippet:

"Umbraco": {
  "CMS": {
    "RichTextEditor": {
    "CustomConfig": {
      "style_formats": "[ { \"title\": \"Headings\", \"items\": [ { ... etc ...

I used this super handy tool to generate everything in the style_formats: TinyMce Config Generator for Umbraco CMS

1 Like
5

Thanks for the replies. I am continuing to try out the suggestions but so far no joy.
Interesting to see that a bug was raised on this issue but the separate nuget package was not named. So it looks like it might still be a bug in certain versions. I am using v13.6.0 with Tiny MCE v6.8.

6

Moving the styles into the RTE stylesheet isn’t ideal because of the limitations. E.g . if I add this:

UL List Dash - which has a selector of ‘ul.list-items-dash’

then create a bullet list and select that format, it creates a UL within a UL.
This may be a bug also - but it is probably why I was using the “style_formats” options, because we had to find a nice solution for lists.

Gets a little more interesting…

If I stop using my base-rte.css stylesheet in the RTE config, the custom formats appear in the RTE format list. It also works if I leave only the custom CSS and allow the stylesheet for use with the RTE.
But as soon as I add a new item in via the back office (or directly into the stylesheet) the custom stuff goes missing again. Have tried creating a separate RTE stylesheet for the custom CSS but same issue.

I can replicate in a clean install of v13.6.0.

7

Ah hah! So it is just that Issue #14819 that Owain mentioned previously.

As per that discussion, it is expected behavior that you can’t use both the appsettings & Backoffice stylesheets simultaneously.

The bothersome way the RTE Stylesheet route deals with adding classes to elements such as lists has been a long-standing issue that’s had discussions since even the old forum. Thankfully at least with the appsettings route there’s an option to get around it ^^ But yes, that means you gotta use the appsettings route and not use the RTE Stylesheet options. Though, you should still be able to use the RTE Stylesheet to apply visual styling to mimic a preview I think.

*Edit: Yus, you can still use the RTE stylesheets to apply CSS styling in a rich text area without interfering with the style_format options in the appsettings.
1 Like
8

@nobledm yes I have tried that out and I can replicate what we have in the RTE formats by adding them to the style_format options. The RTE preview also works. So that’s great. We don’t have particularly complex formatting going on yet so hopefully it’s a smooth transition. I will aim to create a separate JSON file to store the style formats and update the appsettings on build. The one line setup is not ideal for updates or reading.

But this still seems to be a bug in (some versions of) v13. I wonder if it will be fixed?

9

It’s not a bug but expected behavior as per the issue Owain linked previously ^^

I don’t expect anything to be fixed for TinyMCE because as of Umbraco v16 it is being removed. v15 has introduced its replacement as Tiptap. But! This is definitely an area of improvement and Tiptap looks like a fun one to explore with!

Maybe this’ll all be solved just by the new RTE once it’s opened up to style customization :3