CODEWITHSUNDEEP
cssckeditor
Ron
Ron

Reputation: 23466

ckeditor - contentsCss not loading custom styles

I'm using ckeditor v.4.8.0 included in my project by npm.

My config looks like this:

CKEDITOR.editorConfig = function (config) {
   config.extraPlugins = 'stylesheetparser';
   config.contentsCss = '/static/ckeditor/custom/custom_styles.css';
   config.stylesSet = 'default';
   config.autoGrow_MaxHeight = 500;
};

The file is there and the path is correct, still I my DOM elements in the editor just have the styles defined in contents.css.

Any ideas what I might be doing wrong?

Upvotes: 1

Views: 1095

Answers (1)

Mathew Stephen
Mathew Stephen

Reputation: 359

CKEditor by default uses contents.css which is added via config property - contentsCss.

contentsCss: CKEDITOR.getUrl( 'contents.css' ),

https://github.com/ckeditor/ckeditor4/blob/cae20318d46745cc46c811da4e7d68b38ca32449/core/config.js#L287-L303

A possible cause could be, you are not passing proper CKEditor.config to the method - CKEDITOR.editorConfig.

How to debug:

  1. check the network tab, whether contents.css is still loaded.
  2. put the breakpoint before and setting the contentsCss and check for the value in the console.

config.contentsCss = '/static/ckeditor/custom/custom_styles.css';

  1. Access CKEditor.config while running the application and check whether the property contentsCss is properly set.

You can get more details regarding the configuration: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

Upvotes: 1

Related Questions