Contribute to this guide

guidePage break

The PageBreak plugin provides a possibility to insert a page break into the rich-text editor.

# Demo

Use the editor to see the PageBreak plugin in action. Click the button below in order to open the print preview window.

# Installation

To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-page-break package:

npm install --save @ckeditor/ckeditor5-page-break

And add it to your plugin list configuration:

import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ PageBreak, ... ],
        toolbar: [ 'pageBreak', ... ],
    } )
    .then( ... )
    .catch( ... );

Read more about installing plugins.

# Common API

The PageBreak plugin registers:

  • the UI button component ('pageBreak'),
  • the 'pageBreak' command implemented by PageBreakCommand.

The command can be executed using the editor.execute() method:

// Inserts a page break into the selected content.
editor.execute( 'pageBreak' );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-page-break.