Opened 16 years ago
Last modified 12 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)
Change History (4)
Changed 16 years ago by
| Attachment: | ckeditor_content_printed.pdf added |
|---|
comment:1 Changed 16 years ago by
comment:2 Changed 12 years ago by
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.
comment:3 Changed 12 years ago by
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.

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