Page Break Plugin

This plugin adds support for page breaks and allows the user to insert page breaks into an editor. This is useful when the CMS uses a custom separator to separate the content into pages.

Features

• Adds a "Page Break" button to the toolbar in the "insert" group
• Inserts a visual page break indicator in the editor
• Converts the visual indicator to a configurable separator in the final HTML output
• Automatically detects and styles existing page breaks in the content

Installation

If you are using a fat build of the editor, then the plugin is already included in it. If you are using the slim build, then you need to enable it manually:

Jodit.make('#editor', {
    extraPlugins: ['pageBreak']
});
Copy

Options

pageBreak.separator

• Type: string
• Default: '<div style="page-break-before: always"></div>'

The HTML separator that will be used in the final output when a page break is inserted. This can be customized to match your CMS's page break format.

Jodit.make('#editor', {
    pageBreak: {
        separator: '<!-- pagebreak -->'
    }
});
Copy

Usage

Adding a Page Break

1. Place the cursor where you want to insert a page break
2. Click the "Page Break" button in the toolbar
3. A visual page break indicator will be inserted

Programmatic Insertion

You can also insert a page break programmatically:

const editor = Jodit.make('#editor');

// Insert a page break at the current cursor position
editor.execCommand('insertPageBreak');
Copy

Examples

Basic Usage

const editor = Jodit.make('#editor', {
    buttons: ['pageBreak'],
    extraPlugins: ['pageBreak']
});
Copy

Custom Separator for WordPress

const editor = Jodit.make('#editor', {
    buttons: ['pageBreak'],
    extraPlugins: ['pageBreak'],
    pageBreak: {
        separator: '<!--nextpage-->'
    }
});
Copy

Custom Separator with HTML Comment

const editor = Jodit.make('#editor', {
    buttons: ['pageBreak'],
    extraPlugins: ['pageBreak'],
    pageBreak: {
        separator: '<!-- PAGE BREAK -->'
    }
});
Copy

How It Works

1. When you insert a page break, the plugin creates a visual indicator in the editor
2. This indicator is styled to look like a page break and is not editable
3. When you get the editor's content (e.g., when saving), the visual indicators are replaced with the configured separator
4. If content with existing page breaks (matching the style pattern) is loaded into the editor, they are automatically converted to visual indicators

This approach allows for a user-friendly way to insert and visualize page breaks while maintaining compatibility with various CMS systems that use different page break formats.