CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

guidePage break

The page break feature provides a possibility to insert a page break into the rich-text editor. This is useful in paged editing scenarios where you want to have more control over the final structure of the document that is printed, exported to PDF or to Word.

The page break feature is further complemented by the pagination feature that allows you to see where page breaks would be after the document is exported to PDF or to Word.

The Page break feature is enabled by default in the superbuild only. See the installation section to learn how to enable it in your editor.

# Demo

Use the Insert page break toolbar button Insert page break to see the feature in action. Use the Open print preview the button below the editor in order to preview the content.

This demo only presents a limited set of features. Visit the full-featured editor example to see more in action.

Here are some useful CKEditor 5 features that you can use together with the page break plugin for an all-around paged editing experience:

  • The pagination feature allows you to see where page breaks would be after the document is exported to PDF or to Word.
  • The export to Word feature will allow you to generate editable, paged .docx files out of your editor-created content.
  • The export to PDF feature will allow you to generate portable, paged PDF files out of your editor-created content.

# 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/tree/master/packages/ckeditor5-page-break.