For an original training handout, the facilitator wants the participant exercise to begin on a fresh sheet after the briefing. The exercise may move as the briefing changes. The author needs a boundary in the editable document, rather than a screen-only gap made with repeated blank paragraphs.
Add the feature to the existing installation
The current documentation presents Page Break with selected-plan access, and the current implementation marks its editing plugin as premium. Confirm access and valid license configuration for the installed version before adding it. Do not infer entitlement from an older package example. PageBreak implementation
In the application's CKEditor setup, import the feature:
import { PageBreak } from 'ckeditor5';
Add PageBreak to the existing plugins list and 'pageBreak' to the existing toolbar list. Keep the editor root, base features, styles, and license configuration already required by the application. These are additions to a working installation, not a complete editor setup.
Place the cursor between the briefing and the exercise, then use the toolbar action. A custom application control can call the same command on its initialized editor instance:
editor.execute('pageBreak');
Check that the selection is where the author intends before invoking a custom button. Inserting a boundary after the exercise heading would separate the heading from its content, which is a different document structure from starting the whole exercise on a new sheet.
Trace the marker through the save path
Read the current editor data through the normal API:
const handoutHtml = editor.getData();
The current Page Break implementation serializes its model object to a div.page-break with a page-break-after: always style and a hidden child span. Its editing widget has a separate visual label. That distinction matters when investigating a boundary that appears during editing but disappears after reopening.
Inspect these stages in a development record:
| Stage | What to check |
|---|---|
| Current editor data | Boundary marker sits between briefing and exercise |
| Submitted save payload | Same marker remains in the captured handout |
| Stored record | Approved HTML-processing path preserves the supported boundary representation |
| Reopened editor | PageBreak feature recognizes the marker as an editable document object |
The captured string still needs the application's real save operation. If a sanitizer removes the marker's style or changes its structure, a later load can lose the intended model object. Adjust the approved allowlist narrowly for the documented representation; accepting arbitrary submitted styles is not a sound fix.
Do not reconstruct saved content by copying the editor's surrounding DOM. That can capture editing labels and controls rather than the data representation intended for storage. The CKEditor document save guide explains current-data capture and reopening.
Separate a manual boundary from automatic pagination
Page Break inserts a boundary chosen by the author. Automatic pagination predicts where flowing text reaches a page edge. PDF and Word export are additional features and services; the page-break command does not create either file by itself.
For this handout, use the explicit marker to keep the exercise after the briefing. Allow the briefing to flow according to the output format's paper size, margins, fonts, and renderer. Adding blank lines until the editor looks like two pages ties the result to the current screen instead of the actual printed layout.
The HTML print page-break guide covers browser CSS fragmentation rules for a receiving page. Those rules control output layout. They do not register CKEditor's model object or make a stripped marker survive another editing session.
Verify the saved handout and the final file
In the running development application, insert a boundary before the exercise, add a paragraph to the briefing, and save. Leave the record and reopen it. Confirm that the boundary still belongs immediately before the exercise rather than after its heading.
Then use the application's intended print or export route and open the resulting preview or file. Confirm that the exercise starts on a fresh sheet and that its heading stays with the first instruction. Check for an unwanted blank sheet, particularly around existing boundaries or empty trailing content.
If the marker survives storage but the exported result ignores it, investigate that renderer's supported input and styles. If it is missing in the reopened editor, investigate the save-and-load conversion first. Finish with the saved editable handout and the delivered handout agreeing on where the participant exercise begins.