Layout de página: paginação e numeração jurídica

Visualização paginada

A visualização de página renderiza a área editável como uma coluna de papel com a largura real da página e desenha um limite, um número de página e, opcionalmente, um cabeçalho/rodapé para cada página — a visualização de layout de impressão que um processador de texto oferece. Ela é puramente visual: nada do que ela desenha é gravado no seu conteúdo, e o HTML que você salva é idêntico byte a byte com a visualização de página ativada ou desativada.

Carregue o plugin depois do editor e alterne a visualização pela sua própria interface:

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

As páginas são quebradas nos limites dos blocos, então um parágrafo, uma linha de tabela ou uma imagem nunca é dividido ao meio. Uma quebra forçada — a que o comando insertpagebreak da barra de ferramentas insere — sempre inicia uma nova página, exatamente como na exportação.

Configuração de página

A geometria vem da configuração de página do próprio documento quando a sua aplicação fornece uma, de modo que o que você vê na tela corresponde ao que as exportações para PDF e Word produzem. Você também pode defini-la em tempo de execução:

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

Cabeçalhos e rodapés

O HTML do cabeçalho e do rodapé se repete em todas as páginas e aceita os placeholders {page} e {total}:

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

Numeração de lista multinível / jurídica

A numeração jurídica transforma uma lista ordenada aninhada em numeração hierárquica de cláusulas — 1, 1.1, 1.1.1 — o formato em que são escritos contratos, especificações e documentos de políticas.

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

A numeração é gerada com contadores CSS, não gravando números no texto. A sua marcação continua sendo <ol> / <li> semântico e limpo — apenas uma única classe é armazenada na lista raiz —, então os números nunca ficam fora de sincronia quando cláusulas são inseridas, excluídas ou reordenadas. Como é CSS de verdade, o pipeline de impressão do navegador a renderiza, o que significa que a exportação para PDF e a pré-visualização de impressão reproduzem a numeração.

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

O separador e o sufixo podem ser configurados com legalListSeparator e legalListSuffix — por exemplo, "1-1-1" ou "1.1)" —, e o próprio nome da classe, com legalListClass.