Toolbar 'Preview' opens new tab, not a new window

Hi

I really need to make the Preview button open a new window so hopefully I can specify a window width in pixels. I need this to match the actual width (the dynamic content at least) of the website so clients get a better grasp of what they're editing. At the moment it always opens a new tab in the browser but this doesn't give a good indication of what their page will look like on their website, as the preview tab will be as wide as my full CMS interface (of larger if they have their browser maximised) ) rather than my 800px wide editor window.

Tested in Firefox, Safari, Chrome in OS X.

Any ideas or suggestions would be greatly appreciated.

(Initially I wanted to style the preview window to include the background graphics, header & footer etc but that isn't too important for now!)

Fri, 01/07/2011 - 17:51

btate

Joined: 15/07/2009

Posts: 54

Re: Toolbar 'Preview' opens new tab, not a new window

/**
 * @file Preview plugin for [ADD SITE NAME HERE].
 */

(function()
{
   var previewCmd =
   {
      modes : { wysiwyg:1, source:1 },
      canUndo : false,
      exec : function( editor )
      {
         var sHTML;
         var topHTML;
         var bottomHTML;


// Draw the top of the preview page

topHTML = '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">\n';
topHTML += '<html>\n';
topHTML += '<head>\n';
topHTML += '<title>Preview Only -- Do not forget to save</title>\n';
topHTML += '<LINK href="[ADD CCS FILE LINK HERE]" rel="stylesheet" type="text/css">\n';
topHTML += '</head>\n';
topHTML += '<BODY>\n';
topHTML += '<table border="0" cellspacing="5" cellpadding = "0" width="1000">\n';
topHTML += '<!--Navigation Bar-->\n';
topHTML += '<TR><TD WIDTH="1000" colspan="2" valign="top">\n';
topHTML += '<table border="1" bordercolor="#000000" cellspacing ="0" cellpadding ="0"><tr><td width="988" height="62" bgcolor="#c8c8c8" align="center"><h1><b>HEADER PLACEHOLDER</b></h1></td></tr></table>\n';
topHTML += '</TD></TR>\n';
topHTML += '<TR>\n';
topHTML += '<TD width="155" valign="top">\n';

topHTML += '<table border="1" bordercolor="#000000" cellspacing ="0" cellpadding ="0"><tr><td width="155" height="500" bgcolor="#c8c8c8" align="center"><h1><b>NAV PLACE HOLDER</b></h1></td></tr></table>\n';

topHTML += '</TD>\n';
topHTML += '<TD width="823" valign="top">\n';
topHTML += '<table border="0" cellspacing="0" cellpadding="0" width = "823">\n';
topHTML += '<tr>\n';
topHTML += '<td class="header_red">Preview Only -- Do not forget to save!</td>\n';
topHTML += '</tr>\n';
topHTML += '</table>\n';
topHTML += '<table border="0" cellspacing="0" cellpadding="0" width = "823" height="700">\n';
topHTML += '<tr>\n';
topHTML += '<td width="823" valign="top">\n';



// Draw the bottm of the preview page

bottomHTML = '</td>\n';
bottomHTML += '</tr>\n';
bottomHTML += '</table>\n';
bottomHTML += '</td>\n';
bottomHTML += '</tr>\n';
bottomHTML += '</table>\n';
bottomHTML += '</TR>\n';
bottomHTML += '</TABLE>\n';
bottomHTML += '</body>\n';
bottomHTML += '</html>\n';


         sHTML =   editor.getData();

         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 );
         }
         catch ( e ){}

         var sOpenUrl = '';
         var oWindow = window.open( sOpenUrl, null, 'toolbar=yes,location=no,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=' +
            iWidth + ',height=' + iHeight + ',left=' + iLeft );

         oWindow.document.open();
         oWindow.document.write( topHTML + '\n' + sHTML + '\n' + bottomHTML );
         oWindow.document.close();
      }
   };

   var pluginName = 'CustomPreview';

   // Register a plugin named "preview".
   CKEDITOR.plugins.add( pluginName,
   {
      init : function( editor )
      {
         editor.addCommand( pluginName, previewCmd );
         editor.ui.addButton( 'CustomPreview',
            {
               label : editor.lang.preview,
                                        icon: this.path + '[ADD ICON FOR TOOLBAR HERE]',
               command : pluginName
            });
      }
   });
})();