開発者ツール · HTML WYSIWYG エディター
Enter と Shift+Enter: 編集者が <p>、<div>、<br> のいずれかを選択する方法
· 仕組み
html コンテンツ編集可能 テキスト編集
ブラウザー エディターの背後にある段落モデルについて説明します。Enter キーで <p> または <div> が作成される理由、Shift+Enter キーで <br> が挿入される理由、およびそれによって間隔がどのように決定されるのかを説明します。
CMS では間隔が間違っているのに、エディターでは問題ない理由 — 古典的なダブルギャップまたはギャップなしの問題で始まります
ブロックは宛先スタイルシートからマージンを受け取るため、フラグメントが CMS に入力されると、エディターで快適に見える間隔が変わる可能性があります。 br で区切られた 2 つの段落と 2 行は、たとえ 1 つのプレビューで同じような垂直距離があったとしても、構造的に異なります。
ToolAcre はその違いをソースで公開します。コピーされたマージンやインライン スタイルは保持されないため、段落間隔はプレビュー ラッパーまたはその後の宛先 CSS から取得されます。作成者は、一時的なビューが正しく表示されるまで空のキーストロークを追加するのではなく、意味によって構造を選択し、シリアル化された要素を検証する必要があります。
ブロックとインライン区切り — <p> と <div> は独自のマージンを持つブロックであり、<br> はブロック内の改行であることを説明します。
段落と div はブロック コンテナーです。 br は、別のフロー内の空の改行要素です。このエディタでは p と br は許可されますが、div は許可されません。貼り付けられた div はラップ解除され、ラッパーを破棄しながらその単語と許可された子孫を保持します。サニタイズされた br は `<br />` として出力されます。
郵便宛先は、その行が 1 つの単位を形成するため、意図的に改行を入れて 1 つの段落にすることができます。 2 つの独立した考えは、2 つの段落としてより適切に表現されます。デスティネーションは一貫して p マージンのスタイルを設定できますが、垂直スペーサーとして使用される繰り返しの br 要素は、外観をコンテンツに直接エンコードします。
ここで Enter が行うことはブラウザーに依存し、ToolAcre によって構成されません。
ToolAcre は、デフォルトの段落区切りコマンドを設定したり、Enter キーをインターセプトしたりしません。 contenteditable ブラウザーがキーを処理し、入力リスナーが後で出力を更新します。リポジトリの制限により、エンジンの動作が異なることが警告されるため、Enter キーで常に p が作成される、常に div が作成される、または 1 つのバージョン固有のルールに従うと主張することは、互換性に関するガイダンスとなります。
その後、サニタイズ ステップにより、受信したシリアル化が絞り込まれます。ブラウザーで作成された div は、テキストは残りますが、div として存続することはできません。これにより、最終ソースがライブ中間ツリーとは再び異なる可能性があります。したがって、ソースモードは、安定した段落の意味が重要な場合に明示的な p 要素を確立する場所です。
ソフト ブレークはソースに記述できますが、Shift+Enter コントラクトは実装されていません
ツールバーには「ソフト ブレーク」ボタンがなく、コードには Shift+Enter が登録されません。ブラウザはそのジェスチャを実装する可能性がありますが、この記事はその出力を保証するものではありません。ソース モードでは、許可された br を保持でき、視覚的な結果を検査した後に段落内の区切りを表現する決定的な方法を提供します。
キーボードの動作は、モジュールがテストしない選択および編集状態にも依存します。自分の作業に関係するブラウザを使用して、ソースを読んでください。ジェスチャによって不要なブロックが生成された場合は、別のエディター フレームワークからコピーしたショートカットの説明に依存するのではなく、フラグメントを明示的に書き換えます。
実用的な例: 住所とメモを作成し、予測するのではなく検査する
住所の場合、ソース モードを使用して、受信者、番地、地域の間に br を含む 1 つの p を作成します。簡単に説明すると、p 要素を 2 つ作成します。ビジュアル モードに戻り、挿入前にソースがサニタイズされ、マージンが最終的な Web サイトと一致すると仮定せずにプレビューを比較します。
次に、HTML をコピーし、HTML のダウンロードとは別にフラグメントを検査します。コピーされた結果には、サニタイズされた本文マークアップが含まれます。ダウンロードには、ToolAcre のプレビュー CSS を含む完全なドキュメントが含まれています。この違いにより、ダウンロードしたファイルを開く方が、コピーしたフラグメントをさまざまなスタイルのシステムに貼り付けるよりも完全に見える理由が説明されます。
空の段落と非改行スペースは、リライターでサポートされている場合にのみ保持されます。
p が受け入れられ、空のブロックを削除するルールがないため、空の許可された段落が残ることがあります。既知の非ブレークスペース エンティティは、デコードされた文字になり、後でローカル エンティティの実装に従ってエスケープされる場合があります。このコードでは、特にスペーサー段落を対象としたクリーンアップ ルールは提供されていません。
したがって、「今すぐサニタイズ」はレイアウト クリーナーではありません。サポートされていないマークアップと属性を削除し、タグのバランスを取り、ソースをフォーマットしますが、構造的に許容される空を保持することができます。ソース モードまたはビジュアル モードで意図的にスペース アーティファクトを削除し、空白ブロックを蓄積するのではなく、宛先 CSS に通常のマージンを提供させます。
これでカバーされないもの — CSS マージン折りたたみルールまたはエディター フレームワーク設定
この記事では、マージンの折りたたみ、フレームワークの区切り文字の構成、ブラウザごとのキーボード マトリックス、電子メールの間隔の問題については説明しません。また、プレビューが CMS を再現するとも主張しません。ライト サンドボックスは、独自の本文フォント、行の高さ、パディング、および改行動作を使用します。
また、フィルター処理された出力を普遍的に安全な出版物として扱うこともありません。悪意のある送信には、たとえ使い捨てのローカル プレビューが不活性のままであっても、宛先に応じてサーバー側でサニタイズが必要です。段落のセマンティクス、ブラウザーの編集動作、およびセキュリティ ポリシーは 3 つの別個の懸念事項であり、1 つの「正しく見える」テストにまとめるべきではありません。
要点: 意味に一致するブレークを選択する — モデルと、ToolAcre の HTML WYSIWYG エディターで各キーがどの要素を生成するかを確認する方法を要約します。
コンテンツに一致するブレークを選択しますが、キー入力を予測するのではなく検証します。 ToolAcre は、ソースに直接アクセスし、p と br を受け入れ、div をアンラップし、サンドボックス レンダリングを表示します。これらの事実は、Enter または Shift+Enter に関する約束をでっち上げることなく、反復可能なワークフローをサポートします。
小さなアドレスとメモを作成し、モードを 2 回切り替えて、目的の構造がサニタイズ後も存続することを確認します。宛先に驚くべきギャップがある場合は、空の HTML をさらに挿入する代わりに、その CSS を検査してください。安定した意味は、1 つの独立したプレビューに調整された間隔よりも伝わりやすくなります。