ページレイアウト

ページレイアウト：ページ分割と法律文書形式の番号付け

契約書、仕様書、報告書、規程など、文書の形をとる作業のための 2 つのプラグインです。実際のページの境界、ヘッダー、フッター、ページ番号を表示するリアルタイムのページ分割表示と、条項番号を持つ文書のための多階層の法律文書形式の番号付け（1、1.1、1.1.1）があります。どちらも標準ライセンスに含まれています。連続した DOM を実際の用紙の寸法にどう対応させるかについてはブラウザーのエディターでページ分割表示が動く仕組みを、番号付けについては CSS カウンターによる法律文書形式の番号付けを参照してください。

ページ分割ページ設定ヘッダーとフッター法律文書形式の番号付け

ページ分割表示

ページ表示では、編集領域を実際のページ幅の用紙として描画し、各ページに境界、ページ番号、必要に応じてヘッダーとフッターを描きます。ワープロの印刷レイアウト表示と同じものです。これは表示のためだけのもので、描画したものがコンテンツに書き込まれることはなく、保存する HTML はページ表示のオン／オフにかかわらずバイト単位で同一です。

エディターの後でプラグインを読み込み、独自の 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>

改ページはブロックの境界で行われるので、段落、表の行、画像が途中で分割されることはありません。強制的な改ページ（ツールバーの insertpagebreak コマンドが挿入するもの）は、エクスポート時とまったく同じように、常に新しいページを始めます。

ページ設定

アプリが文書自体のページ設定を提供している場合、寸法はそこから取得されるので、画面に表示されるものは PDF や Word へのエクスポートの結果と一致します。実行時に設定することもできます。

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

設定オプション	既定値	用途
`paginationEnabled`	`false`	ページ表示をオンにした状態で開始します。
`pageFormat`	`"A4"`	文書にページ設定がない場合の用紙サイズ。
`pageOrientation`	`"portrait"`	縦向きまたは横向き。
`pageMargins`	`1in all round`	余白。インチまたは任意の CSS の長さで指定します。
`paginationShowPageNumbers`	`true`	ページごとの番号のバッジを描画します。
`paginationShowPageCount`	`true`	`Page 3 of 12` にするか `Page 3` にするか。

ヘッダーとフッター

ヘッダーとフッターの HTML はすべてのページで繰り返され、{page} と {total} のプレースホルダーを使えます。

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

多階層／法律文書形式のリスト番号

法律文書形式の番号付けは、入れ子の番号付きリストを、契約書、仕様書、規程で使われる 1、1.1、1.1.1 という階層的な条項番号に変えます。

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

番号はテキストに書き込むのではなく、CSS カウンターで生成されます。マークアップはきれいで意味のある <ol> / <li> のままで、ルートのリストにクラスが 1 つ保存されるだけです。そのため、条項を挿入、削除、並べ替えしても、番号がずれることはありません。本物の CSS なので、ブラウザーの印刷処理がそれを描画し、PDF へのエクスポートや印刷プレビューでも番号が再現されます。

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

区切り文字と末尾の記号は、legalListSeparator と legalListSuffix で設定できます（たとえば "1-1-1" や "1.1)"）。クラス名自体は legalListClass で設定します。