17

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.

Francisc
  • 77,430
  • 63
  • 180
  • 276

2 Answers2

26

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

Anpher
  • 4,567
  • 24
  • 24
  • 2
    yes that is what I was looking for `config.contentsCss = '/css/mysitestyles.css'; config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];` – CrandellWS Jul 21 '15 at 13:11
6

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

Ravaka
  • 61
  • 1
  • 2