開発者ツール · HTML WYSIWYG エディター
WYSIWYG エディターが書式設定を HTML に変換する方法: contenteditable の説明
· 仕組み
html コンテンツ編集可能 開発者のワークフロー
あらゆる要素を編集可能にする contenteditable 属性、入力および書式設定時にブラウザーがどのように DOM を変更するか、その DOM がどのようにコピーした HTML になるかについて説明します。
太字を押しました。 <strong> はどこから来たのですか? — ボタンをクリックしてからマークアップが表示されるまでの間にギャップがあります。
太字というラベルの付いたツールバー ボタンは絵筆のように見えますが、ブラウザは結果をドキュメント ツリーで表現する必要があります。選択したフレーズは、編集コマンドとエンジンに応じて、<b> 要素または <strong> 要素になります。開発者のタスクは、これらのブラウザ固有の変更を、すべてのタグや危険な属性を受け入れずに別のページが読み取れる HTML に変換することです。画面に表示されるのは編集可能な DOM であり、独立した書式設定レイヤーを備えたワードプロセッサ ファイルではありません。
contenteditable: ページを編集可能にする属性 — 編集ホスト、キャレットの配置、およびブラウザーが編集動作をどのように所有するかを説明します。
contenteditable="true" は要素を編集ホストにします。ブラウザは、その下にある DOM ツリーを使用して、ブラウザ内でのキャレットの移動、選択、挿入、削除を管理します。 ToolAcre の編集画面はこのブラウザ機能を使用し、ビジュアル モードとソース モードの両方を公開します。コンテンツはリッチテキスト サーバーに送信されず、ページ内に残ります。貼り付けイベントには別の注意が必要です。貼り付けられた HTML には、チェックなしで信頼できるドキュメントに入力してはならない要素と属性が含まれる可能性があるためです。
すべてのキーストロークは DOM の突然変異です。テキスト ノードの成長、要素の折り返しと分割、およびテキストが変化していないように見えてもツリーが変化する理由を説明します。
入力するとテキスト ノードが作成または拡張されます。 Enter を押すとブロックが分割される場合があります。選択範囲を太字にすると範囲がラップされます。 2 回クリックした後の正確な DOM が、開発者が想像した <strong> 文字列と一致する保証はありません。ブラウザーは異なる要素とネストを選択します。 ToolAcre は現在、フォーマットに document.execCommand を使用しています。この API は非推奨ですが、ここではすべての編集操作に対して統一的に実装されたドロップイン置換が存在しないため、エディターはその出力を正規化されたマークアップとしてではなく、正規化される信頼できない入力として扱います。
ライブ DOM から HTML 文字列へ — 編集されたツリーをコピー可能なマークアップにシリアル化する方法について説明します。
HTML をコピーするには、エディターは編集画面の innerHTML を読み取り、結果の文字列を要素/属性のホワイトリストに渡します。 b などのタグは、意味的に強いように正規化されます。許可されたリンクは許容可能な URL スキームかどうかチェックされ、イベント ハンドラーと無関係な属性は削除されます。ソース モードでは、テキストを視覚面に戻す前に同じフィルターを通過させます。これはエディター固有のクリーンアップ パスであり、任意のユーザーからの敵対的なコンテンツに対する汎用のサーバー側 HTML サニタイザーではありません。
実用的な例: 太字のフレーズを含む 2 段落のメモ — DOM に従って入力、選択、太字にし、結果のマークアップを表示します。
「プロジェクト更新」と「下書き準備完了」という 2 つの段落を入力し、2 番目の段落で「下書き」を選択して太字を押します。ブラウザは <b>Draft</b> をライブ DOM に挿入する場合があります。ソース モードに切り替えると、ToolAcre のサニタイザーを通過し、正規化後に段落内で <strong>Draft</strong> を発行できます。使い捨てドキュメントに貼り付けられた <img onerror="..."> ペイロードを試してください。出力許可リストには画像やイベント ハンドラー属性が含まれません。この例は、クリックに 1 つの汎用 HTML 表現があると仮定するのではなく、結果のマークアップを検査する理由を示しています。
同じアクションが異なるブラウザーで異なるマークアップを与える理由 - ブラウザー固有の編集動作と、エディターが出力を正規化する理由について説明します。
ブラウザーが異なれば、編集コマンド、改行、選択境界の実装方法も異なります。同じ表示段落でも、異なるネストされたスパンまたはブロック要素でシリアル化できます。正規化ステップにより一部の差異は軽減されますが、WYSIWYG サーフェスが標準で保証されたシリアライザーになるわけではありません。 ToolAcre は視覚的な結果とともにソースを表示するため、奇妙なネストを修正できます。そのプレビューは、スクリプトの実行を許可しないサンドボックス属性を持つ iframe で実行され、そのプレビューに到達する安全でないフラグメントの影響を制限します。
これでカバーされないもの — 共同編集、元に戻すスタック、および完全なエディター フレームワークは範囲外です
このページは、共同編集、完全な取り消し履歴、洗練された電子メール クライアント、または完全なエディター フレームワークを約束するものではありません。 Contenteditable は、サードパーティ CMS が受け入れるマークアップを単独で決定することはできません。また、文字列ベースの許可リストは、信頼できないユーザーがコンテンツを送信できるサーバー側の HTML5 パーサー サニタイザーの代わりにはなりません。サンドボックス プレビューは、出力のクリーニングとは別の防御手段です。どちらも、任意の JavaScript や敵対的な URL をあらゆる宛先で安全にするものではありません。
要点: エディターは目に見える DOM です。ToolAcre の HTML WYSIWYG エディターが、ブラウザーを離れることなく、書式設定で生成されたマークアップを公開する仕組みと方法をまとめています。
エディターは、表示して検査できる DOM です。 ToolAcre の HTML WYSIWYG エディターを使用すると、視覚的な書式設定アクションと、それが生成するフィルター処理された HTML をブラウザー内でローカルに直接比較できます。捨てメモを太字で入力し、ソース モードに切り替えて、宛先が実際にサポートする要素のみを保持します。