Consider an original walking-tour article whose second reader page starts at “The riverside route.” The CMS recognizes <!-- tour-page -->. A visible divider in the editor will not help if the saved comment has a different spelling or disappears during HTML processing.
Match the marker before adding the button
First identify the exact separator recognized by the existing CMS. For the fictional tour application, merge these options into its normal TinyMCE initialization:
const tourPageOptions = {
plugins: 'pagebreak',
toolbar: 'undo redo | pagebreak',
pagebreak_separator: '<!-- tour-page -->'
};
Keep the application's selector, other plugins, toolbar items and license configuration. The marker is an example contract for this CMS, not a standard understood by every publishing system.
Place the insertion cursor immediately before the riverside section and use Page break. The command can overwrite a current selection, so clear an unintended selection first. A custom integration may call editor.execCommand('mcePageBreak') on its initialized instance.
Follow the serialized comment through storage
The intended saved article contains this boundary:
<p>The market route ends at the stone bridge.</p>
<!-- tour-page -->
<h2>The riverside route</h2>
<p>Continue along the signed public footpath.</p>
Inspect editor.getContent() after insertion. Then compare the actual save payload, the stored record and the value loaded on reopening. The editing placeholder and the serialized separator have different jobs. Save the supported content representation rather than copying the editor's surrounding interface DOM.
If the comment disappears, inspect the application's HTML-processing path. Some systems deliberately remove comments. Preserve only the approved marker where the architecture requires it, or use the CMS's documented alternative. Disabling HTML processing across the whole site to retain one marker introduces unrelated problems.
The TinyMCE content capture guide covers retrieving current HTML and synchronizing a backing textarea. Here the diagnostic question is narrower: does this exact separator survive each stage?
Decide how insertion should split a block
pagebreak_split_block controls block-splitting behavior and defaults to false. Enable it deliberately if the authoring interface needs easier insertion within a block:
const blockInsertionOptions = {
pagebreak_split_block: true
};
Test the actual positions authors use: between paragraphs, within a paragraph and around the section heading. Read the serialized HTML after each case. Choose the configuration that gives the CMS a valid boundary without separating a heading from the opening paragraph the reader needs.
Changing the separator for an existing site also needs a content policy. Old articles may still contain the previous marker. Decide whether the CMS supports both representations during migration or whether a controlled content migration is required. Changing one initialization option does not rewrite saved articles.
Test reader pagination separately from printing
A comment is not a CSS print instruction. Browser print pagination uses layout rules such as break-before; the HTML print-break guide covers that separate output. TinyMCE's marker also does not create a PDF or Word file.
For the tour, reopen the saved article and confirm the divider remains before “The riverside route.” Then open the CMS's actual reader preview: page one should end at the bridge, and page two should begin with the riverside heading and instruction. Check the next-page link and a direct visit to the second page according to the CMS's own routing.
If the stored comment is correct but the reader remains one continuous article, investigate the CMS parser and rendering path. If the comment is absent in storage, repair capture or processing first. Finish with the authoring boundary and the reader's route agreeing on where the riverside section begins.