Menu
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.
759
var editor = CKEDITOR. replace( 'editor' ); // Add dynamic css text to be used by the editing area. editor. addCss( 'body { background-color: grey; }' );
Ckeditor 4 allows you to replace multiple textareas with editors based on classname: CKEDITOR.
The CKEDITOR. config. height option sets the height of the editing area with CKEditor 4 content — it does not include the toolbar or the bottom bar. This configuration option accepts an integer (to denote a value in pixels) or any CSS-defined length unit except percent ( % ) values which are not supported.
Setup CKEDITOR.config.contentsCss variable. CKEDITOR.config.bodyClass and CKEDITOR.config.bodyId could help too. These are only options you have (i think).
62
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
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
