Opened 3 years ago

Closed 3 years ago

#14359 closed Bug (invalid)

Custom css classes does not appear in WYSIWYG editor

Reported by: Idar Hareide Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:

Description

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;

}

  1. Create a new style in config.stylesSet:

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

  1. 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

Change History (3)

comment:1 Changed 3 years ago by Jakub Ś

Status: newpending

Which editor you use inline or classic in iframe?

comment:2 in reply to:  1 Changed 3 years ago by Idar Hareide

Replying to j.swiderski:

Which editor you use inline or classic in iframe?

I use classic in iframe.

comment:3 Changed 3 years ago by Jakub Ś

Resolution: invalid
Status: pendingclosed
Version: 4.5.6

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.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy