CODEWITHSUNDEEP
javascriptcssckeditor
Dev 404
Dev 404

Reputation: 1587

CKEditor style sheet not loading on target page

I just implemented CKEditor into my site. However, I noticed that the contents.css file is not being loaded/called at all.

For example, in the editor I can highlight a word or phrase and it shows the correct yellow background. But as soon as I save the text and display it as html on my page, the yellow background is no longer there.

After inspecting the element I can see that it has been given the class of marker. When I look at the contents.css file, it shows that marker has a background-color of yellow.

Using FireBug, I can see that contents.css is never even loaded on the page. What do I need to change here to get this working?

Upvotes: 1

Views: 1521

Answers (1)

Anna Tomanek
Anna Tomanek

Reputation: 2239

The contents.css file provides styles for the content that is in the editor. You can define it with the config.contentsCss option.

Do note that the API documentation description for this setting says:

The CSS file(s) to be used to apply style to editor content. It should reflect the CSS used in the target pages where the content is to be displayed.

CKEditor has no way of knowing what you do with the content it outputs. The default styles available in the Styles drop-down list are just examples and it's up to the developer to customize this list to match the overall look of their website and to add the appropriate styles to the target page. You can read more about it in the Applying Styles to Editor Content documentation and see the relevant CKEditor SDK sample.

Upvotes: 1

Related Questions