Size, Position and Style of Preview Window

I found out how to control size, position and CSS of the preview window..

In folder /ckeditor/_source/plugins/preview, I had to modify plugin.js

Starting @ line 56, this is what you want to look at:

         var iWidth   = 640,   // 800 * 0.8,
             iHeight   = 420,   // 600 * 0.7,
             iLeft   = 80;   // (800 - 0.8 * 800) /2 = 800 * 0.1.
         try
         {
             var screen = window.screen;
             iWidth = Math.round( screen.width * 0.8 );
             iHeight = Math.round( screen.height * 0.7 );
             iLeft = Math.round( screen.width * 0.1 );
         }

I want a fixed width, so I entered my width here:

var iWidth   = 750,

..then commented the line in the "try" section:

// iWidth = Math.round( screen.width * 0.8 );

I also wanted my window to have a 100% height, so my iHeight line in the "try" section looks like this:

iHeight = Math.round( screen.height );

..and I wanted my window centered horizontally, so in the same section, the iLeft line looks like:

iLeft = Math.round( ( screen.width - iWidth ) / 2 );

Now repackage CKE and voila!

As far as controling the CSS of the preview window, add a line to your config.js with a new path to your CSS:

config.contentsCss = '/css/mysitestyles.css';

..or look at the contents.css file in your CKE root folder.