Dividers and page breaks

Draw a line where the text changes topic, or make the next part start on a new page when printed.

createEditor('#editor', {
  toolbar: 'bold | hr hrStyle pageBreak | undo redo',
});

Dividers

The hr button inserts a plain <hr> at the caret. The hrStyle dropdown inserts one in a chosen style. On an empty line you can also type / and pick "Horizontal line".

Every style except thin is saved inline together with border: 0, so it looks the same without your CSS. The thin line follows the browser’s or your site’s hr style.

Page breaks

pageBreak marks where printing (or saving as PDF) moves on to the next page. It is invisible on screen; while editing it shows as a dashed line labelled "PAGE BREAK". It is also in the / menu.

<div data-page-break="" style="page-break-after: always; break-after: page"></div>

editor.exec('hr');            // plain divider
editor.exec('hr', 'dashed');  // thin | thick | dashed | dotted | double | short
editor.exec('pageBreak');

Presets

The board and full presets put hrStyle under ⋯. pageBreak is only in full. No preset has the hr button.

Options