Opened 8 years ago

Last modified 4 years ago

#5286 confirmed Bug

Page break visible on a printed page

Reported by: Wiktor Walc Owned by:
Priority: Normal Milestone:
Component: General Version: 3.0
Keywords: Cc:

Description

When printing the content inside of CKEditor (using the "Print" button), page breaks apart from breaking pages correctly, are also printed.

This is a similar problem to issue with printing tables without a border (#731).

Attachments (1)

ckeditor_content_printed.pdf (9.9 KB) - added by Wiktor Walc 8 years ago.

Download all attachments as: .zip

Change History (4)

Changed 8 years ago by Wiktor Walc

comment:1 Changed 8 years ago by Wiktor Walc

Confirmed in FF 3.5.8, IE8 (see the attachment).

comment:2 Changed 4 years ago by Jakub Ś

Problem can still be reproduced in latest CKEditor 4.3.1.

Here is a workaround for iframe editor:

function hidePageBreaksOnPrint( classname ){								
				var node = editor.document.$.getElementsByTagName( 'body' )[0];//iframed editor
				var regExp = new RegExp( '\\b' + classname + '\\b' );
				var elements = node.getElementsByTagName( 'div' );
				for( var i=0, len=elements.length ; i<len ; i++ ){
					if( regExp.test( elements[i].className)  ){						
						elements[i].setAttribute('style', elements[i].getAttribute('style').concat('visibility: hidden;'));																			
					}
				}
			}
			function showPageBreaksAfterPrint( classname ){								
				var node = editor.document.$.getElementsByTagName( 'body' )[0];//iframed editor
				var regExp = new RegExp( '\\b' + classname + '\\b' );
				var elements = node.getElementsByTagName( 'div' );
				for( var i=0, len=elements.length ; i<len ; i++ ){
					if( regExp.test( elements[i].className)  ){						
						elements[i].setAttribute('style', elements[i].getAttribute('style').replace('visibility: hidden;', ''));																			
					}
				}				
			}
			//var editor =  CKEDITOR.replace( 'editor1');			
			editor.on( 'instanceReady', function( evt )	{
				editor.on('beforeCommandExec', function( event ){
					if( event.data.name == 'print' )
						hidePageBreaksOnPrint('cke_pagebreak');
				});
				editor.on('afterCommandExec', function( event ){
					if( event.data.name == 'print' )
						showPageBreaksAfterPrint('cke_pagebreak');
				});
			});

Very similar workaround can be used for #731 but in case of #731 we have to find table with border 0, class cke_show_borders and then remove this class.

Last edited 4 years ago by Jakub Ś (previous) (diff)

comment:3 Changed 4 years ago by Jakub Ś

Here is the solution for inline editor.

<body onbeforeprint="hidePageBreaksOnPrint('cke_pagebreak');" onafterprint="showPageBreaksAfterPrint('cke_pagebreak');">
...

CKEDITOR.disableAutoInline = true;

		var editor = CKEDITOR.inline( 'editable' );
		

			function hidePageBreaksOnPrint( classname ){								
				var node = document.getElementsByTagName( 'body' )[0];//inline editor	
				var regExp = new RegExp( '\\b' + classname + '\\b' );
				var elements = node.getElementsByTagName( 'div' );
				for( var i=0, len=elements.length ; i<len ; i++ ){
					if( regExp.test( elements[i].className)  ){						
						elements[i].setAttribute('style', elements[i].getAttribute('style').concat('visibility: hidden;'));																			
					}
				}
			}			
			function showPageBreaksAfterPrint( classname ){								
				var node = document.getElementsByTagName( 'body' )[0];//inline editor	
				var regExp = new RegExp( '\\b' + classname + '\\b' );
				var elements = node.getElementsByTagName( 'div' );
				for( var i=0, len=elements.length ; i<len ; i++ ){
					if( regExp.test( elements[i].className)  ){						
						elements[i].setAttribute('style', elements[i].getAttribute('style').replace('visibility: hidden;', ''));																			
					}
				}
			}

Please note however that onbeforeprint and onafterprint are only supported in Firefox and IE.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy