Question

Is it possible to change body style when entering a full page preview in ckeditor 3. Maybe to set a different body style for full page than when it is not in a full page mode.
The reason for this is using ckeditor when viewing a web page on a larger screen with maximized browser… in that case it is very wide and it is hard to read the content. So I would like to add in body style (but only for full page mode) something like:

...
margin: 5%;
padding: 5%;
border: 1px dotted #666;
...

… that will give more text processor look to the content.

TNX!

Answer 1

When CKEditor is toggled to fullscreen mode it adds “cke_maximized” class to container span.

So you may apply styles for entire container span (body+toolbar) like:

.cke_maximized{
   margin: 5%;
   padding: 5%;
   border: 1px dotted #666;
}

or just for content body:

.cke_maximized iframe{
   margin: 5%;
   padding: 5%;
   border: 1px dotted #666;
}

Those are just examples and you may experiment and choose css selector that is more suitable for you .

UPDATE 1:

Sure, you can use javascript code if it is not enough for your purposes. You can use something like this:

var editor = CKEDITOR.instances.editor1;

editor.on("afterCommandExec", function(e){
  if(e.data.name == 'maximize'){
      // maximized
      if(e.data.command.state == CKEDITOR.TRISTATE_ON){
          // add special css class to body(e.editor.document.getBody())
      } else {
      // minimized
      // remove special css from body
      }  
  }
});