8
0
فهرست منبع

Improved the page-break demo.

Kamil Piechaczek 6 سال پیش
والد
کامیت
de8420cf58

+ 17 - 1
packages/ckeditor5-page-break/docs/_snippets/features/page-break.html

@@ -5,4 +5,20 @@
 	<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </div>
 
-<button type="button" id="log-data">Log editor data</button>
+<button type="button" id="print-data-action">Print editor data</button>
+<iframe class="visuallyhidden" id="print-data-container" aria-hidden="true" tabindex="-1"></iframe>
+
+<style>
+	.visuallyhidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		border: 0;
+		padding: 0;
+		white-space: nowrap;
+		clip-path: inset(100%);
+		clip: rect(0 0 0 0);
+		overflow: hidden;
+	}
+</style>

+ 19 - 3
packages/ckeditor5-page-break/docs/_snippets/features/page-break.js

@@ -56,9 +56,25 @@ ClassicEditor
 	.then( editor => {
 		window.editor = editor;
 
-		// The "Log editor data" button logic.
-		document.querySelector( '#log-data' ).addEventListener( 'click', () => {
-			console.log( editor.getData() );
+		// The "Print editor data" button logic.
+		document.querySelector( '#print-data-action' ).addEventListener( 'click', () => {
+			const snippetCSSElement = [ ...document.querySelectorAll( 'link' ) ]
+				.find( linkElement => linkElement.href.endsWith( 'snippet.css' ) );
+
+			const iframeElement = document.querySelector( '#print-data-container' );
+
+			iframeElement.srcdoc = '<html>' +
+				'<head>' +
+					`<title>${ document.title }</title>` +
+					`<link rel="stylesheet" href="${ snippetCSSElement.href }" type="text/css">` +
+				'</head>' +
+				'<body class="ck-content">' +
+					editor.getData() +
+					'<script>' +
+						'window.addEventListener( \'DOMContentLoaded\', () => { window.print(); } );' +
+					'</script>' +
+				'</body>' +
+				'</html>';
 		} );
 	} )
 	.catch( err => {

+ 1 - 1
packages/ckeditor5-page-break/docs/features/page-break.md

@@ -9,7 +9,7 @@ The {@link module:page-break/pagebreak~PageBreak} plugin provides a possibility
 
 ## Demo
 
-Use the editor below to see the {@link module:page-break/pagebreak~PageBreak} plugin in action. Open the web browser console and click the button below to see the page-break snippet code in the editor output data.
+Use the editor below to see the {@link module:page-break/pagebreak~PageBreak} plugin in action. Click the button below in order to open a print preview window.
 
 {@snippet features/page-break}