CKEditor add CSS styling to Preview and Editor

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.开发者_StackOverflow社区

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.

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

To be more exact, you can edit your ckeditor/plugins/styles/styles/default.js and add in files something like { name : 'FloatLeft', element : 'span', attributes : { 'class' : 'floatleft' }}.

Then you add to your ckeditor/contents.css (if you decided to use the editor style) or in your own style.css the class declaration .floatLeft{float:left;margin:0 10px 10px 0;}

Do not forget to clear the browser cache after saving :)

Enjoy