ng2-ckeditor – how to customise the css loaded inside the editor itself?

I need to customise the ENTER key behaviour of ng2-ckeditor. I understand there is a config option as explained here.

However as that link explains, I should use custom css:

If you want to change it to control paragraph spacing, you should use stylesheets instead. Edit the contents.css file and set up a suitable margin value for <p> elements, for example:

p { margin: 0; }

According to this SO question I can load a custom CSS file using a config option, like this:

config.contentsCss = 'mystyles.css'

I tried adding a single file to my project and setting the config in angular 2 component, but the file does not appear to load.

  private setConfig(): void {
    this.ckConfig = {
      height: '250',
      extraPlugins: 'divarea',
      contentsCss: '/theme/styles/ckeditor.css',
      toolbar: [... toolbar configurations ...]
    };
  }

So how can I get ng2-ckeditor to load this file?

Answer

This breaks if you have the DIVAREA plugin activated

Edit (from comment):

This is because contentsCss does not load when using DIVAREA. Makes sense since the CSS would need to be scoped to inside the DIV (easy with iFrame).

Maybe new CSS layers could help here? github.com/ckeditor/ckeditor4/issues/4640 github.com/ckeditor/ckeditor4/issues/4642