Documentation

Paginated page view

Page view renders the editable as a paper column at true page width and draws a boundary, page number, and optional header/footer for every page — the print-layout view a word processor gives you. It is purely presentational: nothing it draws is written into your content, and the HTML you save is byte-for-byte identical whether page view is on or off.

Load the plugin after the editor, then toggle it from your own UI:

<script src="richtexteditor/rte.js"></script>
<script src="richtexteditor/plugins/pagination.js"></script>

<script>
  var editor = new RichTextEditor("#editor");

  editor.setPageView(true);       // turn page view on
  editor.togglePageView();        // flip it
  editor.isPageView();            // -> true | false
  editor.getPageCount();          // -> number of pages
  editor.getPageGeometry();       // -> { pageWidth, pageHeight, margins..., contentHeight }
</script>

Pages break on block boundaries, so a paragraph, table row or image is never split down the middle. A forced break — what the insertpagebreak toolbar command inserts — always starts a new page, exactly as it does on export.

Page setup

Geometry comes from the document’s own page setup when your app supplies one, so what you see on screen matches what the PDF and Word exports produce. You can also set it at runtime:

editor.setPageSetup({
  format: "Letter",          // A4 | Letter | Legal | A3 | A5 | Tabloid
  orientation: "portrait",   // portrait | landscape
  margins: { top: 1, right: 1, bottom: 1, left: 1 }   // inches, or "25mm" / "2cm" / "72pt" / "96px"
});

Headers & footers

Header and footer HTML repeat on every page and support {page} and {total} placeholders:

editor.setPageSetup({
  headerHtml: "Master Services Agreement — Acme Corp",
  footerHtml: "Page {page} of {total} · Confidential"
});

Multi-level / legal list numbering

Legal numbering turns a nested ordered list into hierarchical clause numbering — 1, 1.1, 1.1.1 — the format contracts, specifications and policy documents are written in.

<script src="richtexteditor/plugins/multilevellist.js"></script>

<script>
  // Acts on the ordered list containing the caret.
  editor.setLegalNumbering(true);
  editor.toggleLegalNumbering();
  editor.isLegalNumbering();     // -> true | false

  // The stylesheet, so your public page / print template can match the editor.
  editor.getLegalListCss();
</script>

The numbering is produced with CSS counters, not by writing numbers into the text. Your markup stays clean semantic <ol> / <li>— only a single class is stored on the root list — so numbers can never fall out of sync when clauses are inserted, deleted or re-ordered. Because it is real CSS, the browser print pipeline renders it, which means PDF export and Print preview reproduce the numbering.

<ol class="rte-legal-list">
  <li>Definitions          <!-- 1.     -->
    <ol>
      <li>Agreement        <!-- 1.1.   -->
      <li>Parties          <!-- 1.2.   -->
        <ol><li>Discloser  <!-- 1.2.1. -->
            <li>Recipient  <!-- 1.2.2. -->
        </ol>
    </ol>
  <li>Obligations          <!-- 2.     -->
</ol>

The separator and suffix are configurable with legalListSeparator and legalListSuffix— for example "1-1-1" or "1.1)" — and the class name itself with legalListClass.