Kamil Piechaczek před 6 roky
rodič
revize
a8a9216257

+ 8 - 0
packages/ckeditor5-page-break/docs/_snippets/features/page-break.html

@@ -0,0 +1,8 @@
+<div id="snippet-page-break">
+	<h1>What is Lorem Ipsum?</h1>
+	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+	<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>
+	<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>

+ 66 - 0
packages/ckeditor5-page-break/docs/_snippets/features/page-break.js

@@ -0,0 +1,66 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window, document, console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor.builtinPlugins.push( PageBreak );
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-page-break' ), {
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'bulletedList',
+				'numberedList',
+				'blockQuote',
+				'link',
+				'|',
+				'imageUpload',
+				'mediaEmbed',
+				'insertTable',
+				'pageBreak',
+				'|',
+				'undo',
+				'redo',
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		image: {
+			styles: [
+				'full',
+				'alignLeft',
+				'alignRight'
+			],
+			toolbar: [
+				'imageStyle:alignLeft',
+				'imageStyle:full',
+				'imageStyle:alignRight',
+				'|',
+				'imageTextAlternative'
+			]
+		},
+		table: {
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		// The "Log editor data" button logic.
+		document.querySelector( '#log-data' ).addEventListener( 'click', () => {
+			console.log( editor.getData() );
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 34 - 0
packages/ckeditor5-page-break/docs/api/page-break.md

@@ -0,0 +1,34 @@
+---
+category: api-reference
+---
+
+# Page break feature for CKEditor 5
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-page-break.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-page-break)
+
+This package implements the page break feature for CKEditor 5.
+
+## Demo
+
+Check out the {@link features/page-break#demo demo in the Page break feature} guide.
+
+## Documentation
+
+See the {@link features/page-break Page break feature} guide and the {@link module:page-break/pagebreak~PageBreak} plugin documentation.
+
+## Installation
+
+```bash
+npm install --save @ckeditor/ckeditor5-page-break
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5-page-break.
+
+## External links
+
+* [`@ckeditor/ckeditor5-page-break` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-page-break)
+* [`ckeditor/ckeditor5-page-break` on GitHub](https://github.com/ckeditor/ckeditor5-page-break)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5-page-break/blob/master/CHANGELOG.md)

+ 55 - 0
packages/ckeditor5-page-break/docs/features/page-break.md

@@ -0,0 +1,55 @@
+---
+category: features
+menu-title: Page break
+---
+
+# Page break
+
+The {@link module:page-break/pagebreak~PageBreak} plugin provides a possibility to insert a page break in the rich-text editor.
+
+## 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.
+
+{@snippet features/page-break}
+
+## Installation
+
+To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-page-break`](https://www.npmjs.com/package/@ckeditor/ckeditor5-page-break) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-page-break
+```
+
+And add it to your plugin list configuration:
+
+```js
+import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ PageBreak, ... ],
+		toolbar: [ 'pageBreak', ... ],
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
+## Common API
+
+The {@link module:page-break/pagebreak~PageBreak} plugin registers the UI button component (`'pageBreak'`) and the `'pageBreak'` command implemented by {@link module:page-break/pagebreakcommand~PageBreakCommand}. 
+
+The command can be executed using the {@link module:core/editor/editor~Editor#execute `editor.execute()`} method:
+
+```js
+// Inserts the page break to the selected content.
+editor.execute( 'pageBreak' );
+```
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-page-break.