Custom css classes does not appear in WYSIWYG editor

[Idar Hareide]

Steps to reproduce

1. Create a style class in a css file

.example {

background-color:#FAFAFA; border:1px solid #DDD; font-family:courier new; margin:0.6em; padding:0.8em;

}

2. Create a new style in config.stylesSet:

{ name: 'Example', element: 'div', attributes: { 'class': 'example' } }

3. In the editor, select a paragraph, and select the newly created style Example in the styles set

Expected result

The text should be formatted as the style class is defined, with the background color as grey.

Actual result

In editor mode there is no change, but when I save the html and displays it in the browser, I get the wanted formatting. If I try to edit the text, the formatting is not showing.

If I use styles it works fine, but I would like to avoid using styles hardcoded on the elements int the html document, because I want to be able to change the formatting without editing all the instances in all the documents. If I can use css class, I just edit it once in the style sheet

Other details (browser, OS, CKEditor version, installed plugins)

IE 11, Chrome 48 Windows 7 CKEditor 4.5.4 standard editor

• image2
• imageuploader

[Jakub Ś]

Which editor you use inline or classic in iframe?

[Idar Hareide]

Replying to j.swiderski:

Which editor you use inline or classic in iframe?

I use classic in iframe.

[Jakub Ś]

First of all, you need to define style rules in styles.js file or external JS file.
Please see:
​http://docs.ckeditor.com/#!/guide/dev_howtos_styles ​http://docs.ckeditor.com/#!/guide/dev_styles-section-4

In order to attach your custom CSS file please use ​http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss. Please bear in mind that you will most likely need to clear your browser's cache www.wikihow.com/Clear-Your-Browser's-Cache to see css changes.