On Umbraco 17, TinyMCE fails loading selected stylesheet CSS

Questions
1

On Umbraco 17, I choose a stylesheet CSS like /dist/css/styles.css in TinyMCE configs, but it loads it from /css/dist/css/styles.css (with an extra /css prepended). I have tried hacking the path uSync file to ~/ and ../ etc but nothing helped.

Could this be a bug and is there a workaround to it please?

2 
"Umbraco": {
  "RichTextEditor": {
    "CustomConfig": {
      ...
      "body_class": "prose",
      "content_style": "body { padding:16px !important; }",
      "content_css": "/dist/css/styles.css"
      ...
    }
  },

Rubber ducked. Here’s the solution. Even tho the selection in CMS UI doesn’t work still.

3

Hi @iannn-nv ,

It seems it’s hardcoded that’s why adds css before the path.

I was looking into this and got this workaround haven’t tried it, please check it once. (Took some help from AI):

  1. Create a physical file at wwwroot/css/rte-proxy.css.
  2. Inside that file, add exactly one line of code:
    @import url('/dist/css/styles.css');
  3. In your Umbraco TinyMCE config, select rte-proxy.css.

Umbraco prepends /css/ and successfully loads /css/rte-proxy.css. It is happy. Your browser then reads the @import rule and automatically reaches out to fetch your real styles from the correct dist folder.

Regards,
Shekhar

4

Ooo, this seems like an excellent issue to post in Github :slight_smile:

I can see if I can get something a bit more configurable in the next release :+1:

5

I wasn’t able to reproduce this issue in the TinyMCE Umbraco package. If you are still having an issue, please submit an issue to the Issue Tracker on Github: Issues · ProWorksCorporation/TinyMCE-Umbraco · GitHub