preview window scrollbar

HEllo,

I have a problem trying to configure the window preview of ckeditor. I would like it to be scrollable so I changed this part of ckeditor.js:

var A=window.open(z,null,'toolbar=yes,location=no,status=yes,menubar=yes,resizable=yes,width='+v+',height='+w+',left='+x);

to:

var A=window.open(z,null,'toolbar=no,location=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width='+v+',height='+w+',left='+x);

But when I click the preview button of ckeditor, the new page (page preview) still doesn't have any scrollbar.

Someone know how to configure it?

Tue, 02/21/2012 - 16:16

sebstefanov

Joined: 03/02/2012

Posts: 1329

Re: preview window scrollbar

this plugin explained here

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn

If you think you found a bug in CKEditor, read this!

Tue, 02/21/2012 - 17:41

nattydreadnatty

Joined: 21/02/2012

Posts: 3

Re: preview window scrollbar

ok thank you very much

Tue, 02/21/2012 - 19:16

nattydreadnatty

Joined: 21/02/2012

Posts: 3

ok I tried install your plugin and I had the same problem so I came back using the by default preview of ckeditor and looking at the source code of the page I was editing I noticed that I had a "overflow-y: hidden" added to the <html> of the page. So after some tries, I noticed that if the code i am writing isn't bigger than the height of my editor form the <html> of the source code doesn't have the "overflow-y: hidden" css code but as soon as it is bigger than the form height the "overflow-y: hidden" appears in the <html>.

For info, I am using the 'fullPage : true,' mode and those extra plugins extraPlugins : 'docprops,autogrow,placeholder'

Here is my editor replace code

<script type="text/javascript">
         //<![CDATA[
 
   
               CKEDITOR.replace( 'editor',
               {
                  skin : 'kama',
                  fullPage : true,
                  extraPlugins : 'docprops,autogrow,placeholder',
                  // Remove the Resize plugin as it does not make sense to use it in conjunction with the AutoGrow plugin.
                  removePlugins : 'resize',
                  filebrowserBrowseUrl : '/kcfinder/browse.php?type=files',
                  filebrowserImageBrowseUrl : '/kcfinder/browse.php?type=images',
                  filebrowserFlashBrowseUrl : '/kcfinder/browse.php?type=flash',
                  filebrowserUploadUrl : '/kcfinder/upload.php?type=files',
                  filebrowserImageUploadUrl : '/kcfinder/upload.php?type=images',
                  filebrowserFlashUploadUrl : '/kcfinder/upload.php?type=flash',
                              
                  toolbar : 
                        [
                           { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
                           { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                           { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
                     
                           '/',
                           { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
                           { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                           { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
                           { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
                           { name: 'admin',items : ['CreatePlaceholder']},
                           { name: 'tools', items : [ 'Maximize', 'ShowBlocks' ] },
                           '/',
                           { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
                           { name: 'colors', items : [ 'TextColor','BGColor' ] }
                        ],
                                          
                  stylesSet :
                        [
                           { name : 'Strong Emphasis', element : 'strong' },
                           { name : 'Emphasis', element : 'em' },

                           { name : 'Computer Code', element : 'code' },
                           { name : 'Keyboard Phrase', element : 'kbd' },
                           { name : 'Sample Text', element : 'samp' },
                           { name : 'Variable', element : 'var' },

                           { name : 'Deleted Text', element : 'del' },
                           { name : 'Inserted Text', element : 'ins' },

                           { name : 'Cited Work', element : 'cite' },
                           { name : 'Inline Quotation', element : 'q' },
                           
                           { name : 'edito', element : 'p.edito' , styles: {  padding: '15px' , border: '2px solid #000' , lineheight: '18px'  } },
                           { name : 'titre article gauche', element : 'h1.article1' , styles: {  font: 'bold 13px Georgia' , borderBottom : '1px solid #b40001', color: '#b40001' , margin : '20px 0px 0px 0px'  }  },
                           { name : 'texte article droite', element : 'p.article2' , styles: { color: '#555' } },
                           { name : 'titre brève gauche', element : 'h2.breves1' , styles: { font: 'bold 11px Verdana' , color: '#b40001'}},
                           { name : 'texte brève droite', element : 'p.breves2' }
                           
                        ]
               });
               
         //]]>
</script>

and here is the source code generated by ckeditor:

<html style="overflow-y: hidden;">
   <head>
      <title></title>
   </head>
   <body>
      <div id="Container" style="width: 800px; margin-left: auto; margin-right: auto;">
         <div id="Banner" style="height: 110px;">
            Banni&egrave;re</div>
         <div id="Menu" style="height: 35px;">
            Menu</div>
         <div id="Content">
            <div id="Main" style="width: 600px; float: left; min-height: 650px;">
               Conteneur principal</div>
            <div id="RightColumn" style="width: 200px; float: right;">
               Colonne de droite</div>
            <div style="clear: both;">
               &nbsp;</div>
         </div>
         <div id="Footer" style="height: 30px;">
            Footer</div>
      </div>
      <p>
         &nbsp;</p>
   </body>
</html>

and the same code when the content of the form is smaller than the height of the form:

<html >
   <head>
      <title></title>
   </head>
   <body>
      <div id="Container" style="width: 800px; margin-left: auto; margin-right: auto;">
         <div id="Banner" style="height: 110px;">
            Banni&egrave;re</div>
      </div>
      <p>
         &nbsp;</p>
   </body>
</html>