CODEWITHSUNDEEP
javascripthtmlcssckeditor
roryok
roryok

Reputation: 9645

CKEditor - my styles in editor.css aren't being applied

I'm trying to change the default font color / size etc in the area of my ckeditor instance, but it's not working for me.

In chrome inspector I can add this style to the header and it works: 

.cke_editable { 
    color: #fff; 
    font-size: 14px; 
    font-family: "Calibri";
}

However when I add this to my editor.css it has no effect. I've tried at the start and at the end, with no success. When I reload and check the resources in inspector, the correct css file is being loaded. Why aren't my styles applied?

When I inspect the iframe the style tag in the header doesn't contain the styles either.

Upvotes: 0

Views: 5270

Answers (3)

roryok
roryok

Reputation: 9645

Figured it out by removing my config and re-adding it a part at a time.

The very first line was 

fullPage: true,

I had copied this from another source which used fullpage. I don't need it so I removed it.

According to the documentation, having fullPage on will stop contentsCss being implemented. From the ckeditor documentation:

Note: This configuration value is ignored by inline editor as it uses the styles that come directly from the page that CKEditor is rendered on. It is also ignored in the full page mode in which developer has a full control over the HTML.

However, what they fail to mention is that having fullPage set to true will also stop any changes to editor.css from being loaded. Once it was removed my custom styles shined through

Handy tip:

contentsCSS does not have to point to a css file. You can put straight css in there instead of a url, like so 

contentsCss: '.cke_editable { color: #fff; font-family: Calibri; font-size: 14px; } ',

This will apply these styles directly to the editor. This appears to be undocumented as the documentation only mentions stylesheet urls.

Upvotes: 2

codegaze
codegaze

Reputation: 755

You need to change the content.css in the main ckeditor folder or add the following setting http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

Upvotes: 1

Dave Burns
Dave Burns

Reputation: 327

It sounds like your CSS styles are being overridden - try adding !important to each style like below:

.cke_editable { 
color: #fff!important; 
font-size: 14px!important; 
font-family: "Calibri"!important;
}

Upvotes: 0

Related Questions