Can I add my own css files to ckeditor?


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:


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

Best regards

edit: this is concerning backend editing, btw

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

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

How to create and configure your own configuration File is explained here:

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.

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:

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

    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