/*\r
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.html or http://ckeditor.com/license\r
*/\r
\r
command : 'pagebreak'\r
});\r
\r
+ var cssStyles = [\r
+ '{' ,\r
+ 'background: url(' + CKEDITOR.getUrl( this.path + 'images/pagebreak.gif' ) + ') no-repeat center center;' ,\r
+ 'clear: both;' ,\r
+ 'width:100%; _width:99.9%;' ,\r
+ 'border-top: #999999 1px dotted;' ,\r
+ 'border-bottom: #999999 1px dotted;' ,\r
+ 'padding:0;' ,\r
+ 'height: 5px;' ,\r
+ 'cursor: default;' ,\r
+ '}'\r
+ ].join( '' ).replace(/;/g, ' !important;' ); // Increase specificity to override other styles, e.g. block outline.\r
+\r
// Add the style that renders our placeholder.\r
- editor.addCss(\r
- 'img.cke_pagebreak' +\r
- '{' +\r
- 'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/pagebreak.gif' ) + ');' +\r
- 'background-position: center center;' +\r
- 'background-repeat: no-repeat;' +\r
- 'clear: both;' +\r
- 'display: block;' +\r
- 'float: none;' +\r
- 'width:100% !important; _width:99.9% !important;' +\r
- 'border-top: #999999 1px dotted;' +\r
- 'border-bottom: #999999 1px dotted;' +\r
- 'height: 5px !important;' +\r
- 'page-break-after: always;' +\r
-\r
- '}' );\r
+ editor.addCss( 'div.cke_pagebreak' + cssStyles );\r
+\r
+ // Opera needs help to select the page-break.\r
+ CKEDITOR.env.opera && editor.on( 'contentDom', function()\r
+ {\r
+ editor.document.on( 'click', function( evt )\r
+ {\r
+ var target = evt.data.getTarget();\r
+ if ( target.is( 'div' ) && target.hasClass( 'cke_pagebreak') )\r
+ editor.getSelection().selectElement( target );\r
+ });\r
+ });\r
},\r
\r
afterInit : function( editor )\r
{\r
- // Register a filter to displaying placeholders after mode change.\r
+ var label = editor.lang.pagebreakAlt;\r
\r
+ // Register a filter to displaying placeholders after mode change.\r
var dataProcessor = editor.dataProcessor,\r
- dataFilter = dataProcessor && dataProcessor.dataFilter;\r
+ dataFilter = dataProcessor && dataProcessor.dataFilter,\r
+ htmlFilter = dataProcessor && dataProcessor.htmlFilter;\r
+\r
+ if ( htmlFilter )\r
+ {\r
+ htmlFilter.addRules(\r
+ {\r
+ attributes : {\r
+ 'class' : function( value, element )\r
+ {\r
+ var className = value.replace( 'cke_pagebreak', '' );\r
+ if ( className != value )\r
+ {\r
+ var span = CKEDITOR.htmlParser.fragment.fromHtml( '<span style="display: none;"> </span>' );\r
+ element.children.length = 0;\r
+ element.add( span );\r
+ var attrs = element.attributes;\r
+ delete attrs[ 'aria-label' ];\r
+ delete attrs.contenteditable;\r
+ delete attrs.title;\r
+ }\r
+ return className;\r
+ }\r
+ }\r
+ }, 5 );\r
+ }\r
\r
if ( dataFilter )\r
{\r
\r
if ( childStyle && ( /page-break-after\s*:\s*always/i ).test( style ) && ( /display\s*:\s*none/i ).test( childStyle ) )\r
{\r
- var fakeImg = editor.createFakeParserElement( element, 'cke_pagebreak', 'div' );\r
- var label = editor.lang.pagebreakAlt;\r
- fakeImg.attributes[ 'alt' ] = label;\r
- fakeImg.attributes[ 'aria-label' ] = label;\r
- return fakeImg;\r
+ attributes.contenteditable = "false";\r
+ attributes[ 'class' ] = "cke_pagebreak";\r
+ attributes[ 'data-cke-display-name' ] = "pagebreak";\r
+ attributes[ 'aria-label' ] = label;\r
+ attributes[ 'title' ] = label;\r
+\r
+ element.children.length = 0;\r
}\r
}\r
}\r
{\r
exec : function( editor )\r
{\r
- // Create the element that represents a print break.\r
var label = editor.lang.pagebreakAlt;\r
- var breakObject = CKEDITOR.dom.element.createFromHtml( '<div style="page-break-after: always;"><span style="display: none;"> </span></div>' );\r
\r
- // Creates the fake image used for this element.\r
- breakObject = editor.createFakeElement( breakObject, 'cke_pagebreak', 'div' );\r
- breakObject.setAttribute( 'alt', label );\r
- breakObject.setAttribute( 'aria-label', label );\r
+ // Create read-only element that represents a print break.\r
+ var pagebreak = CKEDITOR.dom.element.createFromHtml(\r
+ '<div style="' +\r
+ 'page-break-after: always;"' +\r
+ 'contenteditable="false" ' +\r
+ 'title="'+ label + '" ' +\r
+ 'aria-label="'+ label + '" ' +\r
+ 'data-cke-display-name="pagebreak" ' +\r
+ 'class="cke_pagebreak">' +\r
+ '</div>' );\r
\r
var ranges = editor.getSelection().getRanges( true );\r
\r
range = ranges[ i ];\r
\r
if ( i < ranges.length -1 )\r
- breakObject = breakObject.clone( true );\r
+ pagebreak = pagebreak.clone( true );\r
\r
range.splitBlock( 'p' );\r
- range.insertNode( breakObject );\r
+ range.insertNode( pagebreak );\r
if ( i == ranges.length - 1 )\r
{\r
- range.moveToPosition( breakObject, CKEDITOR.POSITION_AFTER_END );\r
- range.select();\r
- }\r
+ var next = pagebreak.getNext();\r
+ range.moveToPosition( pagebreak, CKEDITOR.POSITION_AFTER_END );\r
\r
- var previous = breakObject.getPrevious();\r
+ // If there's nothing or a non-editable block followed by, establish a new paragraph\r
+ // to make sure cursor is not trapped.\r
+ if ( !next || next.type == CKEDITOR.NODE_ELEMENT && !next.isEditable() )\r
+ range.fixBlock( true, editor.config.enterMode == CKEDITOR.ENTER_DIV ? 'div' : 'p' );\r
\r
- if ( previous && CKEDITOR.dtd[ previous.getName() ].div )\r
- breakObject.move( previous );\r
+ range.select();\r
+ }\r
}\r
\r
editor.fire( 'saveSnapshot' );\r