エディターの外でリッチテキスト HTML を表示するレスポンシブスタイル

表、コードブロック、画像を含む公開用 HTML 記事

HTML の保存は作業の半分にすぎません。公開ページには閲覧用のスタイル、安定した画像 URL、スマートフォンに収まるレイアウトも必要です。このガイドでは完全な静的 HTML と小さなスタイルシートを用意します。閲覧ページで RichTextEditor を初期化する必要はありません。

コンテンツのスタイルと編集用 UI を分ける

getHTMLCode() が返すのはマークアップであり、アプリケーション全体のテーマではありません。サイトのリセットや文字組みのルールが適用されると、見出し、リスト、表の見た目は変わります。記事の表示だけのためにツールバーのテーマを読み込まず、公開ページ用のコンテンツスタイルを使います。

閲覧用スタータースタイルシートを取得してください。セレクターは .rte-reader 内に限定され、ナビゲーションや別の記事のスタイルを変更しません。フォント、余白、対応するクラスは製品に合わせて調整してください。すべての編集機能を再現するレンダラーではなく、出発点となるサンプルです。

完全な公開記事のサンプルを試す

スタイルシートと画像をアプリケーションから配信し、Web サーバー経由でページを開きます。サンプルは信頼できるデモ用コンテンツを使っています。実際の文書では、アプリケーションのサーバー側公開ポリシーを通過した HTML だけを挿入してください。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Published project notes</title>
  <link rel="stylesheet" href="/docs/reader.css">
  <style>body { margin: 0; padding: 24px; }</style>
</head>
<body>
<!-- Trusted demonstration HTML. Sanitize customer content on your server. -->
<article class="rte-reader">
  <h1>Project notes</h1>
  <p>A published document can keep <strong>emphasis</strong>, lists and links
     without loading an editor toolbar.</p>
  <ul><li>Keep reading styles scoped.</li><li>Use durable image URLs.</li></ul>
  <div class="rte-table-scroll" tabindex="0" role="region" aria-label="Project status table">
    <table>
      <caption>Project status</caption>
      <thead><tr><th scope="col">Task</th><th scope="col">Owner</th><th scope="col">Status</th></tr></thead>
      <tbody><tr><td>Publish the article</td><td>Content team</td><td>Ready for review</td></tr></tbody>
    </table>
  </div>
  <pre><code>const message = "A long code line should scroll inside its own block, without widening the entire page.";</code></pre>
  <figure>
    <img src="/images/editor-image.png" width="300" height="200" alt="A farm and green fields beneath a blue sky">
    <figcaption>Give each published image a stable URL and useful alternative text.</figcaption>
  </figure>
</article>
</body>
</html>

保存された HTML も入力として扱う

表示前にサーバーで文書へのアクセス権とサイズを検証し、信頼できない HTML をサニタイズします。データベースに保存しただけで文字列が安全になるわけではありません。保守されている HTML サニタイザーを使い、要素、属性、スタイル、URL スキームの許可方針を明確にします。

保存された任意の文字列を innerHTML やフレームワークの生 HTML 表示機能へ直接渡してはいけません。スクリプトタグを削除する正規表現は HTML サニタイザーではありません。このスタイルシートもサニタイズは行いません。公開用の変換後も出力を再検証し、除去したイベントハンドラーや危険な URL を復活させないでください。

表、画像、コードを読みやすくする

.rte-table-scroll のラッパーは表の意味構造を保ったまま幅広い表をスクロールさせます。必要な表には表示テンプレートでラッパーを追加してください。スタイルシートが保存済み HTML を書き換えることはありません。キャプションと列見出しを残し、スクロール領域をキーボードでフォーカス可能にします。

画像には安定した URL、読者に適したアクセス権、代替テキスト、寸法が必要です。サンプルは狭い画面で画像を縮小します。HTML ファイルをダウンロードしても画像は自動で同梱されません。コードブロックはその領域内でスクロールし、言語ラベルだけでは構文強調は読み込まれません。

静的な閲覧ページと読み取り専用エディターを選ぶ

公開文書を読むだけなら静的 HTML を使います。同じ画面から編集に戻る必要がある場合は、読み取り専用エディターのガイドを参照してください。ブラウザーのモード切り替えとサーバーの権限を混同しないでください。

コメント、変更履歴、数式、図、埋め込みメディアには、別の公開形式や機能専用レンダラーが必要になる場合があります。何を公開するかを決めてからサニタイズ方針を選びます。エディター専用クラスを除去しても、対話機能がすべて残るとは限りません。

公開の流れを確認する

  1. 見出し、リスト、強調、表のキャプションを元の文書と比較します。
  2. 320px と 390px で、幅広い表とコードが局所的にスクロールし、ページ全体を広げないことを確認します。
  3. ログイン済みの著者だけでなく、想定読者も画像を取得できることを確認します。
  4. スタイルシートを読み込んでもサイトのナビゲーションや隣接コンテンツが変わらないことを検証します。
  5. 正常な記事と拒否すべき入力の両方で、サーバーのサニタイザーと URL 方針をテストします。

続いてエディターの HTML 取得、サーバー自動保存、画像の保存、リッチテキストの保存型 XSSを参照してください。

次に読む