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:
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?
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âŚ
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.
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.
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.
@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?
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