浏览代码

Merge branch 'master' of github.com:ckeditor/ckeditor5-page-break

Anna Tomanek 6 年之前
父节点
当前提交
0280585e14

+ 4 - 2
packages/ckeditor5-page-break/src/pagebreakediting.js

@@ -38,6 +38,8 @@ export default class PageBreakEditing extends Plugin {
 			model: 'pageBreak',
 			view: ( modelElement, viewWriter ) => {
 				const divElement = viewWriter.createContainerElement( 'div', {
+					class: 'page-break',
+					// If user has no `.ck-content` styles, it should always break a page during print.
 					style: 'page-break-after: always'
 				} );
 
@@ -61,10 +63,10 @@ export default class PageBreakEditing extends Plugin {
 				const viewLabelElement = viewWriter.createContainerElement( 'span' );
 				const innerText = viewWriter.createText( t( 'Page break' ) );
 
-				viewWriter.addClass( 'ck-page-break', viewWrapper );
+				viewWriter.addClass( 'page-break', viewWrapper );
 				viewWriter.setCustomProperty( 'pageBreak', true, viewWrapper );
 
-				viewWriter.addClass( 'ck-page-break_label', viewLabelElement );
+				viewWriter.addClass( 'page-break__label', viewLabelElement );
 
 				viewWriter.insert( viewWriter.createPositionAt( viewWrapper, 0 ), viewLabelElement );
 				viewWriter.insert( viewWriter.createPositionAt( viewLabelElement, 0 ), innerText );

文件差异内容过多而无法显示
+ 11 - 15
packages/ckeditor5-page-break/tests/manual/pagebreak.html


+ 5 - 5
packages/ckeditor5-page-break/tests/manual/pagebreak.js

@@ -52,11 +52,11 @@ ClassicEditor
 	.then( editor => {
 		window.editor = editor;
 
-		const logDataButton = document.querySelector( '#log-data' );
-
-		logDataButton.disabled = false;
-		logDataButton.addEventListener( 'click', () => {
-			console.log( window.editor.getData() );
+		// Generate "Editor content preview".
+		const contentPreviewBox = document.getElementById( 'preview' );
+		contentPreviewBox.innerHTML = editor.getData();
+		editor.model.document.on( 'change:data', () => {
+			contentPreviewBox.innerHTML = editor.getData();
 		} );
 	} )
 	.catch( err => {

+ 8 - 1
packages/ckeditor5-page-break/tests/manual/pagebreak.md

@@ -1 +1,8 @@
-There should be a page break widget between two paragraphs in the editor.
+## Testing
+1. There should be a page break widget between two paragraphs in the editor.
+
+## Content styles
+
+1. Inspect page break in the editor and in the content preview (below).
+2. The centered label (with the "Page break" text) should **not** be displayed in the content preview.
+3. The dashed line should be displayed in the content preview.

+ 43 - 16
packages/ckeditor5-page-break/tests/pagebreakediting.js

@@ -56,14 +56,29 @@ describe( 'PageBreakEditing', () => {
 				setModelData( model, '<pageBreak></pageBreak>' );
 
 				expect( editor.getData() ).to.equal(
-					'<div style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>'
+					'<div class="page-break" style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>'
 				);
 			} );
 		} );
 
 		describe( 'view to model', () => {
-			it( 'should convert the page break code element', () => {
-				editor.setData( '<div style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>' );
+			it( 'should convert the page break code element without `.page-break` class', () => {
+				editor.setData(
+					'<div style="page-break-after:always;">' +
+						'<span style="display:none;">&nbsp;</span>' +
+					'</div>'
+				);
+
+				expect( getModelData( model, { withoutSelection: true } ) )
+					.to.equal( '<pageBreak></pageBreak>' );
+			} );
+
+			it( 'should convert the page break code element with `.page-break` class', () => {
+				editor.setData(
+					'<div class="page-break" style="page-break-after:always;">' +
+						'<span style="display:none;">&nbsp;</span>' +
+					'</div>'
+				);
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '<pageBreak></pageBreak>' );
@@ -79,21 +94,27 @@ describe( 'PageBreakEditing', () => {
 
 				editor.conversion.elementToElement( { model: 'div', view: 'div' } );
 
-				editor.setData( '<div><div style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div></div>' );
+				editor.setData(
+					'<div>' +
+						'<div class="page-break" style="page-break-after:always;">' +
+							'<span style="display:none;">&nbsp;</span>' +
+						'</div>' +
+					'</div>'
+				);
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '<div> </div>' );
 			} );
 
 			it( 'should not convert if outer div has wrong styles', () => {
-				editor.setData( '<div style="page-break-after:auto;"><span style="display:none;">&nbsp;</span></div>' );
+				editor.setData( '<div class="page-break" style="page-break-after:auto;"><span style="display:none;">&nbsp;</span></div>' );
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '' );
 			} );
 
 			it( 'should not convert if outer div has no children', () => {
-				editor.setData( '<div style="page-break-after:always;"></div>' );
+				editor.setData( '<div class="page-break" style="page-break-after:always;"></div>' );
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '' );
@@ -101,7 +122,7 @@ describe( 'PageBreakEditing', () => {
 
 			it( 'should not convert if outer div has too many children', () => {
 				editor.setData(
-					'<div style="page-break-after:always;">' +
+					'<div class="page-break" style="page-break-after:always;">' +
 						'<span style="display:none;">&nbsp;</span>' +
 						'<span style="display:none;">&nbsp;</span>' +
 					'</div>'
@@ -113,8 +134,8 @@ describe( 'PageBreakEditing', () => {
 
 			it( 'should not convert if inner span has wrong styles', () => {
 				editor.setData(
-					'<div style="page-break-after:always;">' +
-					'<span style="display:inline-block;">&nbsp;</span>' +
+					'<div class="page-break" style="page-break-after:always;">' +
+						'<span style="display:inline-block;">&nbsp;</span>' +
 					'</div>'
 				);
 
@@ -124,7 +145,7 @@ describe( 'PageBreakEditing', () => {
 
 			it( 'should not convert if inner span has wrong styles', () => {
 				editor.setData(
-					'<div style="page-break-after:always;">' +
+					'<div class="page-break" style="page-break-after:always;">' +
 					'<span style="display:inline-block;">&nbsp;</span>' +
 					'</div>'
 				);
@@ -135,7 +156,7 @@ describe( 'PageBreakEditing', () => {
 
 			it( 'should not convert if inner span has any children', () => {
 				editor.setData(
-					'<div style="page-break-after:always;">' +
+					'<div class="page-break" style="page-break-after:always;">' +
 						'<span style="display:none;">' +
 							'<span>Foo</span>' +
 						'</span>' +
@@ -148,7 +169,7 @@ describe( 'PageBreakEditing', () => {
 
 			it( 'should not convert if inner span has text', () => {
 				editor.setData(
-					'<div style="page-break-after:always;">' +
+					'<div class="page-break" style="page-break-after:always;">' +
 						'<span style="display:none;">Foo</span>' +
 					'</div>'
 				);
@@ -176,7 +197,7 @@ describe( 'PageBreakEditing', () => {
 
 				editor.setData(
 					'<section>' +
-						'<div style="page-break-after:always;">' +
+						'<div class="page-break" style="page-break-after:always;">' +
 							'<span style="display:none;">&nbsp;</span>' +
 						'</div>' +
 						'<span style="display:none;">Foo</span>' +
@@ -188,14 +209,20 @@ describe( 'PageBreakEditing', () => {
 			} );
 
 			it( 'should not convert if inner span has no children', () => {
-				editor.setData( '<div style="page-break-after:always;"><span style="display:none;"></span></div>' );
+				editor.setData( '<div class="page-break" style="page-break-after:always;"><span style="display:none;"></span></div>' );
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '' );
 			} );
 
 			it( 'should not convert if inner span has other element as a child', () => {
-				editor.setData( '<div style="page-break-after:always;"><span style="display:none;"><span></span></span></div>' );
+				editor.setData(
+					'<div class="page-break" style="page-break-after:always;">' +
+						'<span style="display:none;">' +
+							'<span></span>' +
+						'</span>' +
+					'</div>'
+				);
 
 				expect( getModelData( model, { withoutSelection: true } ) )
 					.to.equal( '' );
@@ -209,7 +236,7 @@ describe( 'PageBreakEditing', () => {
 				setModelData( model, '<pageBreak></pageBreak>' );
 
 				expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
-					'<div class="ck-page-break ck-widget" contenteditable="false"><span class="ck-page-break_label">Page break</span></div>'
+					'<div class="ck-widget page-break" contenteditable="false"><span class="page-break__label">Page break</span></div>'
 				);
 			} );
 

+ 29 - 17
packages/ckeditor5-page-break/theme/pagebreak.css

@@ -3,39 +3,51 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck .ck-page-break {
+.ck-content .page-break {
 	position: relative;
 	clear: both;
 	padding: 5px 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-}
 
-.ck .ck-page-break::after {
-	content: '';
-	position: absolute;
-	border-bottom: 2px dashed var(--ck-color-toolbar-border);
-	width: 100%;
+	&::after {
+		content: '';
+		position: absolute;
+		border-bottom: 2px dashed hsl(0, 0%, 77%);
+		width: 100%;
+	}
 }
 
-.ck .ck-page-break_label {
+.ck-content .page-break__label {
 	position: relative;
-	z-index: var(--ck-z-default);
-	padding: var(--ck-spacing-small) var(--ck-spacing-standard);
+	z-index: 1;
+	padding: .3em .6em;
 	display: block;
 	text-transform: uppercase;
-	border: 1px solid var(--ck-color-toolbar-border);
-	border-radius: var(--ck-border-radius);
-	font-size: var(--ck-font-size-small);
+	border: 1px solid hsl(0, 0%, 77%);
+	border-radius: 2px;
+	font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
+	font-size: 0.75em;
 	font-weight: bold;
-	color: var(--ck-color-base-text);
-	background: var(--ck-color-base-background);
-	box-shadow: 2px 2px 1px var(--ck-color-shadow-drop);
+	color: hsl(0, 0%, 20%);
+	background: #fff;
+	box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
 
-	/* Disable posssibility to select label text by user. */
+	/* Disable possibility to select label text by user. */
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
 }
+
+/* Do not show page break element inside printing window view. */
+@media print {
+	.ck-content .page-break {
+		padding: 0;
+
+		&::after {
+			display: none;
+		}
+	}
+}