Can I add my own css files to ckeditor?

TYPO3 Questions Backend (UI / Configuration / Permissions)
#1

Hi,

frequently I have to deal with problems related to the fact that editors can not anticipate how the content they edit in RTE will look on the page.

I am looking for a way to apply my frontend css files to the RTE.

It seems, the RTE uses an iframe in which the following css files are included:

/typo3/sysext/rte_ckeditor/Resources/Public/Css/contents.css
/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/plugins/tableselection/styles/tableselection.css
/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/showbrokenlinks/styles/showbrokenlinks.css

Is there a way to make the ckeditor add my own css files as well?

Best regards

edit: this is concerning backend editing, btw

#2

Hi Nils,
you can add custom CSS via the “contentCss” attribute in a custom ckeditor configuration yaml file which you have to create.

editor:
  config:
    contentsCss: ["EXT:yourExtension/yourPath/Css/ckeditor.css"]

How to create and configure your own configuration File is explained here:
https://docs.typo3.org/c/typo3/cms-rte-ckeditor/master/en-us/Configuration/QuickStart.html

If you dont have your very own config for the ckeditor, be sure to import the existing default config from the ckeditor to your config file.

#3

Hi Felix,

thank you very much for your advice. I’ve already managed to find that out. So sorry that I forgot to update this thread.

There is one thing I want to add to you explanation: I been trying time and time again to add the contentCss value to my own configuration after I’ve included base configuration with its own contentCss like this:

imports:
    - { resource: "fileadmin/page/Configuration/RTE/Editor/Base.yaml" }
...

editor:
  config:
    contentsCss: ['/fileadmin/page/Resources/Public/Css/Webfonts.css', '/fileadmin/page/Resources/Public/Css/Main.css']

That didn’t work no matter what I tried but when I set the contentCss value in the Base.yaml file which is included everything was working fine.

Overwriting the contentCss value after the inclusion didn’t work for me - no idea why. I didn’t have any time for further tests so when it finally worked I left it like that.

Best regards