CODEWITHSUNDEEP
cssclassckeditorcustomization
Francisc
Francisc

Reputation: 80415

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.

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.

Upvotes: 17

Views: 25546

Answers (2)

Ravaka
Ravaka

Reputation: 61

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

Upvotes: 6

Marcis
Marcis

Reputation: 4617

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

Upvotes: 26

Related Questions