The Page Break Plugin, one of the three major features introduced in the 4.7 release, addresses a long-standing gap in document creation workflows. For years, users have requested the ability to insert page breaks similar to what they experience in Microsoft Word or Google Docs. This plugin delivers exactly that functionality, providing seamless integration with Froala’s powerful export capabilities.
What is the Page Break Plugin and Its Use Cases
The Page Break Plugin is a specialized component that allows users to insert explicit page breaks within the editor content. Unlike traditional line breaks or paragraph separators, page breaks are structural elements that signal where a new page should begin when the document is exported to formats like Word (.docx) or PDF, or when printed.
Key use cases for the Page Break Plugin include:
Marketing Reports: Create professional multi-chapter reports with chapters starting on separate pages
Technical Documentation: Structure complex documentation with clear section divisions
Legal Documents: Format contracts and agreements with precise page control
Academic Papers: Organize thesis chapters, research papers, and technical manuals
Email Templates: Design multi-section email campaigns with deliberate page breaks
Annual Reports: Build comprehensive corporate reports with executive summaries on dedicated pages
Training Materials: Create structured training documents with logical page divisions
When to Use Page Breaks
Page breaks are particularly valuable when your use case involves:
Long-form content that requires logical separation
Documents destined for print or PDF export
Professional formatting where content organization matters
Multi-page documents where specific sections need dedicated pages
Compliance or regulatory documents requiring structured layouts
Understanding Page Breaks in Froala
A page break is a structural marker in a document that instructs rendering engines — whether browsers, PDF generators, or word processors — to start a new page at that point. In Froala, page breaks are represented using a special HTML custom structure that’s intelligible to various export formats.
Installation and Setup
Prerequisites and Requirements
Before implementing the Page Break Plugin, ensure you have:
Froala Editor Version 4.7.0 or later — The page break plugin is a new feature introduced in this version.
Enabling the Page Break Plugin
Step 1: Including Required JavaScript Files
For vanilla JavaScript implementations, include the necessary Froala libraries in your HTML:
<!-- Include Froala CSS -->
<link href="path/to/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<!-- Include Froala JavaScript (packaged version includes all plugins) -->
<script type="text/javascript" src="path/to/froala_editor.pkgd.min.js"></script>
If using the basic version of Froala without plugins bundled, you must include the page break plugin separately
<link href="path/to/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="path/to/css/plugins/page_break.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="path/to/js/froala_editor.min.js"></script>
<script type="text/javascript" src="path/to/js/plugins/page_break.min.js"></script>
<script type="text/javascript" src="path/to/js/plugins/export_to_word.min.js"></script> <!-- Optional: for Word export -->If using a module system like Webpack or ES6 imports, enable the page break plugin in your configuration:
Step 2: Initializing the Editor with Page Breaks Enabled
To enable the Page Break feature when customizing plugins:
Ensure
“pageBreak”is listed inpluginsEnabled.Ensure
“pageBreak”is NOT listed inpluginsDisabled.
Additionally, to make the Page Break button available on the toolbar, ensure the pageBreak is included in the toolbar button configurations for all sizes:
toolbarButtonstoolbarButtonsMDtoolbarButtonsSMtoolbarButtonsXS
new FroalaEditor('#editor', {
pluginsEnabled: ['pageBreak', 'exportToWord'],
pluginsDisabled: ['track_changes', 'fontSize'],
toolbarButtons: ['pageBreak', 'export_to_word', 'undo', 'redo', '|', 'bold', 'italic']
});
Step 3: Set Page Break Plugin Configuration Properties
The exportPageBreak Option
This critical option controls whether page breaks are preserved during export operations:
new FroalaEditor('#editor', {
exportPageBreak: true, // Enable page break export
});
When exportPageBreak is set to true, page breaks are converted to appropriate format-specific equivalents during Word export.
Customizing Page Break Behavior for Your Use Case
The plugin offers the pageBreak.beforeInsert event, which fires before a page break is inserted, allowing you to validate or prevent the action.
You can use this event to limit the number of page breaks inserted per document.
new FroalaEditor('#editor', {
events: {
'pageBreak.beforeInsert': function () {
console.log('Page break insertion triggered');
// Example: Allow only 5 page breaks per document
const breakCount = this.$el.find('.fr-page-break').length;
if (breakCount >= 5) {
alert('Maximum 5 page breaks allowed');
return false; // Prevent insertion
}
return true; // Allow insertion
}
}
});
Using the Page Break Plugin: User Perspective
Inserting Page Breaks via Toolbar
Once the Page Break Plugin is enabled and the toolbar button is visible:
Position your cursor where you want the page break to occur.
Click the page break button (By default, it is on the “More Rich“ toolbar buttons group and represented by an icon showing pages stacked together)
A visual indicator appears in the editor showing the page break location.
Continue editing as normal.
The page break creates a visual guide in the editor — a dotted line with a subtle visual marker — without disrupting the editing experience.
Visual Representation in the Editor
Page breaks are represented with a gray dotted horizontal line where the page break exists with a “Page Break” label on the left.
Hovering over the page break marker displays a yellow border and a selection handle, which allows users to select, move, or delete the page break.
These visual cues help users understand document structure without making the editor appear cluttered.
Moving Page Breaks
To modify page break placement:
Click directly on the page break selection handle.
Drag the page break to a new position.
Removing Page Breaks
To remove an accidentally inserted page break:
Click directly on the page break selection handle.
Press the Delete key or Backspace
The page break is removed, and content flows together.
Conclusion
The Froala Page Break Plugin represents a significant advancement in web-based document editing. By providing explicit pagination control combined with seamless export capabilities, it enables developers to build professional document creation applications.
The Froala Page Break Plugin is ready for implementation in your projects. Whether you’re building marketing automation platforms, documentation tools, or custom reporting systems, page breaks provide the professional document structure your users expect.
Next Steps:
Evaluate Froala for your use case
Experiment with page break functionality
Integrate into your development roadmap.
Share your implementation with the community
The future of web-based document editing is here — make page breaks part of your solution.
Frequently Asked Questions (FAQ)
Is a page break the same as a regular line or paragraph break?
No. A page break is a structural marker that signals where a new page should start in PDF or Word exports and in print workflows. It does not simply insert extra space or a cosmetic divider; it defines content flow across pages.
Will page breaks always render on-screen exactly as they will export?
The editor shows a visual indicator for page breaks, but rendering can differ across export targets (Word vs PDF) due to format-specific layout rules. Expect similar but not guaranteed pixel-perfect alignment across formats.
Are there performance or memory considerations for documents with many page breaks?
Page breaks add structural markers to the document model. In very large documents, excessive breaks can impact editing responsiveness slightly; balance the number of breaks with your editing needs and test in your target environment.
How do I verify that page breaks export correctly?
Create a sample doc with known page-break placements, export to Word and PDF, and compare the page boundaries. Use the beforeInsert hook to enforce constraints during drafting to reduce export surprises.
Resources for Further Learning
Official Documentation:
This article was published on the Froala blog.
Top comments (0)