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

guidePage break

The page break feature lets you insert page breaks into your content. This gives you more control over the final structure of a document that is printed or exported to PDF or Word.

# Demo

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

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Installation

The Page break feature is enabled by default in the superbuild only.

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';

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

Read more about installing plugins.

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.

# Common API

The PageBreak plugin registers:

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

You can execute the command 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 at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-page-break.