CKEditor add CSS styling to Preview and Editor

css class ckeditor customization
Francisc picture Francisc · Aug 31, 2010 · Viewed 24.7k times · Source

Is it possible to add CSS to style the Editor text as well as the Preview?

The CMS has a different set of CSS files from the public part of the website and I want the editor to try (at least) and reflect the way it would look in the site.

For example, all tags with a class of .floatLeft{float:left;margin:0 10px 10px 0;} I want to look the same in the Editor.

Thank you.

Answer

Anpher picture Anpher · Aug 31, 2010

Setup CKEDITOR.config.contentsCss variable. CKEDITOR.config.bodyClass and CKEDITOR.config.bodyId could help too. These are only options you have (i think).

Related questions

Using two CSS classes on one element

What am I doing wrong here? I have a .social div, but on the first one I want zero padding on the top, and on the second one I want no bottom border. I have attempted to create classes for …

Read More
How to override the properties of a CSS class using another CSS class

I am fairly new to CSS3 and I want to be able to do the following: When I add a class into a an element, it overrides the properties of another class used in this specific element. Let's say that …

Read More
Add and remove a class on click using jQuery?

Please see this fiddle. I am trying to add and remove a class on li elements that are clicked. It is a menu and when one clicks on each li item I want it to gain the class and all …

Read More