Contribute to this guide

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.

The Flavorful Tuscany Meetup

Welcome letter

Dear Guest,

We are delighted to welcome you to the annual Flavorful Tuscany Meetup. We hope you will enjoy the program as well as your stay at the Bilancino Hotel.

Please find attached the full schedule of the event.

The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels in the region. All the sessions are led by top chefs passionate about their profession. I would recommend saving the date in your calendar for this one!

Angelina Calvino, food journalist

Please arrive at the Bilancino Hotel reception desk at least half an hour earlier to ensure that the registration process goes as smoothly as possible.

We look forward to welcoming you to the event.

Victoria Valc

Event Manager
Bilancino Hotel

 

The Flavorful Tuscany Meetup Schedule

Saturday, July 14
9:30 AM - 11:30 AM

Americano vs. Brewed - “know your coffee” with: 

  • Giulia Orlanda
  • Stefano Garau
  • Giuseppe Russo
1:00 PM - 3:00 PM

Regional delicacies of Tuscany - live cooking

Incorporate the freshest ingredients 
with Rita Fresco

5:00 PM - 8:00 PM Tuscan vineyards at a glance - wine-tasting 
with Frederico Riscoli

 

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.