Seitenlayout: Seitenumbruch und juristische Nummerierung

Seitenweise Ansicht

Die Seitenansicht stellt den bearbeitbaren Bereich als Papierspalte in echter Seitenbreite dar und zeichnet für jede Seite eine Grenze, eine Seitenzahl und optional Kopf- und Fußzeile – die Drucklayout-Ansicht, wie sie ein Textverarbeitungsprogramm bietet. Sie ist rein darstellend: Nichts, was sie zeichnet, wird in Ihren Inhalt geschrieben, und das gespeicherte HTML ist Byte für Byte identisch, ob die Seitenansicht ein- oder ausgeschaltet ist.

Laden Sie das Plugin nach dem Editor und schalten Sie es dann über Ihre eigene Oberfläche um:

<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>

Seiten brechen an Blockgrenzen um, sodass ein Absatz, eine Tabellenzeile oder ein Bild nie in der Mitte geteilt wird. Ein erzwungener Umbruch – das, was der Symbolleistenbefehl insertpagebreak einfügt – beginnt immer eine neue Seite, genau wie beim Export.

Seiteneinrichtung

Die Maße stammen aus der Seiteneinrichtung des Dokuments selbst, wenn Ihre App eine mitliefert, sodass das, was Sie am Bildschirm sehen, dem entspricht, was der PDF- und der Word-Export erzeugen. Sie können sie auch zur Laufzeit setzen:

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"
});

Kopf- & Fußzeilen

Das HTML für Kopf- und Fußzeile wiederholt sich auf jeder Seite und unterstützt die Platzhalter {page} und {total}:

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

Mehrstufige / juristische Listennummerierung

Die juristische Nummerierung macht aus einer verschachtelten nummerierten Liste eine hierarchische Klauselnummerierung – 1, 1.1, 1.1.1 –, das Format, in dem Verträge, Spezifikationen und Richtliniendokumente geschrieben werden.

<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>

Die Nummerierung entsteht mit CSS-Countern, nicht durch Nummern im Text. Ihr Markup bleibt sauberes, semantisches <ol> / <li> – an der obersten Liste wird nur eine einzige Klasse gespeichert –, sodass die Nummern nie aus dem Takt geraten, wenn Klauseln eingefügt, gelöscht oder umsortiert werden. Weil es echtes CSS ist, rendert es die Druck-Pipeline des Browsers, und damit geben PDF-Export und Druckvorschau die Nummerierung wieder.

<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>

Trennzeichen und Suffix lassen sich mit legalListSeparator und legalListSuffix konfigurieren – zum Beispiel "1-1-1" oder "1.1)" –, der Klassenname selbst mit legalListClass.