読み取り専用リッチテキストエディター：表示から編集へ切り替える

書式付き文書と完全なツールバーを表示する RichTextEditor

レビュー画面、送信済みフォーム、一時的にロックされた文書には、読み取り専用のリッチテキストエディターが役立ちます。書式付き文書を表示したまま、アプリケーションが許可した時点で同じインスタンスを編集可能に戻します。

用途に合った表示モードを選ぶ

setReadOnly(true) はエディターの操作モードを変更します。getReadOnly() で状態を取得し、setReadOnly(false) で編集可能に戻します。別のエディターや文書のコピーは必要ありません。

公開記事を読むだけの場合は、適切にサニタイズした HTML をアプリケーションの閲覧用スタイルで表示します。同じ画面に編集機能も必要なときに、エディター全体の読み込みが役立ちます。読み取り専用モードは HTML をサニタイズせず、アクセス制御も提供しません。

読み取り専用の完全なサンプルを動かす

エディターのアセットをアプリケーションから配信し、Web サーバー経由でこのページを開きます。ボタンはモード切り替えのデモであり、本番環境の権限確認ではありません。状態メッセージと押下状態は、別途管理するフラグではなく実際の API 値を反映します。

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div style="max-width:100%;overflow-x:auto"><div id="editor"></div></div>
<button id="allow-editing" type="button" aria-pressed="false">Allow editing</button>
<p id="mode-status" role="status" aria-live="polite"></p>
<script>
const editor = new RichTextEditor("#editor", { toolbar: "full" });
// Trusted example content, not untrusted HTML from a request:
editor.setHTMLCode("<h2>Project notes</h2><p>Keep <strong>formatting</strong> while viewing.</p>");
editor.setReadOnly(true);
const toggle = document.getElementById("allow-editing");
const status = document.getElementById("mode-status");
function showMode() {
  const readOnly = editor.getReadOnly();
  toggle.setAttribute("aria-pressed", String(!readOnly));
  status.textContent = readOnly ? "Read-only. Text changes are locked." : "Editable.";
}
showMode();
// Demonstration only. A production app must enforce permissions on its server.
toggle.addEventListener("click", function () {
  editor.setReadOnly(!editor.getReadOnly());
  showMode();
  if (!editor.getReadOnly()) editor.focus();
});
</script>

保存された内容と権限を分けて考える

表示モードでも getHTMLCode() で文書を取得できます。モードの切り替えは保存操作ではなく、データベースも変更しません。通常の保存と検証の処理は別に維持してください。

ユーザーはブラウザーのコードを変更したり API を直接呼び出したりできます。サーバー側の書き込みごとに権限を確認し、権限のない更新を拒否し、文書のバージョンが古ければ競合を返します。編集権限を持つ人にだけ編集操作を表示してください。読み込む HTML は信頼できない入力として扱い、公開前に出力のサニタイズ方針を適用します。

エディターを作り直さずに組み込む

React、Vue などのコンポーネントフレームワークでは、安定した参照にインスタンスを保持し、権限やワークフローの状態が変わったときにモードを切り替えます。その都度エディターを作り直すと、選択範囲、元に戻す履歴、未保存の内容が失われることがあります。

文書を非同期で取得する場合、権限が確認された文書の読み込みが完了するまで編集をロックします。遅れて届いた応答で新しい下書きを置き換えないでください。一時的なロックが解除されても、ユーザーに権限が残っている場合だけ編集を再開します。一般的な読み取り専用の切り替えは、コメントのみの権限、保護された範囲、共同編集のロック管理を提供しません。

キーボードとモバイルで動作を確認する

  1. ページを開き、読み取り専用の状態を確認します。
  2. 入力、削除、貼り付けを試し、保存対象の HTML が変わらないことを確認します。
  3. キーボードでボタンを操作し、単語を編集してから表示モードに戻します。変更したテキストと書式が保持されることを確認します。
  4. 320px と 390px で長い表、画像、コードブロックを確認します。はみ出す内容は文書領域の中でスクロールさせ、ページ全体を広げないようにします。
  5. サーバー側で権限のない保存要求をテストします。ブラウザーの操作がロックされているだけでは、エンドポイントが書き込みを拒否する証拠にはなりません。

setReadOnly()、getReadOnly()、HTML の取得を参照してください。続いて確実なサーバー自動保存、フォーム検証、画像アップロードも確認できます。

次に読む