開発者ツール · HTML WYSIWYG エディター
クリップボード上のリッチ テキスト: アプリケーション間で書式設定がどのように移動するか
· 背景
html クリップボード コンテンツ編集可能
リッチ テキスト コピーがクリップボードに配置する複数の形式、各アプリケーションが形式を選択する方法、および貼り付けられたマークアップがコピーされたものとまったく同じにならない理由について説明します。
同じコピー、3 つの異なる貼り付け - コンテンツがブラウザ、端末、メール クライアントに貼り付けられた状態で開きます
宛先が異なる表現を要求するため、コピーされた 1 つの段落は、ブラウザー エディターではフォーマットされたコンテンツとして、端末ではフォーマットされていない文字として受信される可能性があります。 ToolAcre の貼り付けハンドラーは、クリップボードに HTML とプレーン テキストを要求し、ブラウザーのデフォルトの挿入を信頼するのではなく、固定ブランチに従います。
HTML が存在する場合、元のリッチ フラグメントが表面に直接入ることはありません。最初に消毒剤を通過します。 HTML が存在しない場合は、プレーン テキストが挿入されます。このローカル ルールは、すべてのメール クライアント、オペレーティング システム、またはオフィス スイートがどのようにクリップボード データを優先するかを主張することなく、このエディターの動作を説明しています。
この貼り付けハンドラーは text/html および text/plain; を読み取ります。より広範なクリップボード フレーバーは証拠の外です
クリップボードには、1 つの選択内容の複数の表現を含めることができます。この実装は、`text/html` および `text/plain` を明示的に処理します。 RTF、画像、ファイル参照、またはアプリケーション固有の形式は列挙されないため、これらをサポートされる入力として暗黙的に示すべきではありません。
2 つの文字列は、異なる情報をエンコードできます。プレーン テキストには文字と改行が含まれますが、HTML には段落、リスト、強調、リンクに加えて不要な属性も含まれます。 ToolAcre は、利用可能な場合は構造を優先しますが、挿入前に要素、属性、および URL ポリシーを通じて構造を絞り込みます。
HTML フレーバーを作成するのは誰ですか — ソース アプリケーションが HTML フレーバーを生成するため、Word と Google ドキュメントのペーストが非常に異なって見えるのはそのためだと説明しています
ソース アプリケーションは HTML 表現を作成します。そのため、視覚的に類似した 2 つのコピーが異なるラッパーとプレゼンテーションを提供できるのです。 ToolAcre は生産者を特定しません。これは 1 つの一般的なルールを適用します。サポートされていないラッパーと属性は、生成元に関係なく削除されます。
これにより、出典のない Word または Google Docs 内部のカタログが製品の宣伝文句になるのを防ぎます。削除リストは、このパーサーが何を拒否したかをライターに正確に伝えます。ソース アプリケーションへの忠実度が重要な場合は、一般的な記事の例に依存するのではなく、サポートされている環境から実際のフィクスチャをキャプチャしてテストしてください。
宛先の選択方法 — 優先順位とプレーンテキストとして貼り付けのショートカットをカバーします
送り先はコードで選択します。ここでは、空ではない HTML が優先されます。それ以外の場合はプレーンテキストが使用されます。 「プレーン テキストとして貼り付け」用のツールバー スイッチはなく、リポジトリ ソースはキーボード ショートカットの動作を定義しません。ブラウザとオペレーティング システムは、そのようなジェスチャを個別に提供する場合があります。
ドロップ処理は、DataTransfer と同じ考え方を反映しています。デフォルトを防止し、HTML とプレーン値を読み取り、`insertHTML` の前に HTML をサニタイズし、`insertText` を通じてプレーン文字を送信します。貼り付けとは異なり、ドロップ パスには同じ詳細な削除数は表示されませんが、更新すると表示されているドキュメントが更新されます。
プラットフォーム フラグメントのメタデータは、この実装では明示的に解析されません
一部のプラットフォームでは HTML クリップボードのフラグメントをメタデータまたはマーカーでラップしますが、ToolAcre には名前付きプラットフォーム形式用の明示的なパーサーが含まれていません。そのトークナイザーは、`getData("text/html")` によって返された文字列を参照し、認識されたマークアップを処理します。したがって、この記事では、ヘッダー構文、オフセット、オペレーティング システム固有の保証については省略します。
ラッパーがコメントとして表示される場合、コメントは削除されます。メタデータが認識された HTML の外に到着した場合は、動作をテストする必要があります。コードが決して名前を付けていないプラットフォーム プロトコルのサポートまたは拒否を主張するには、定性的な可能性だけでは十分ではありません。
実用的な例: 豊富なクリップボード ペイロードとプレーンのみのペイロードを比較する
強力なテキスト、短いリスト、https リンクを含む機密性の低い段落をコピーします。リッチ ペーストでは、許可された構造を保持し、ソース スタイルを削除し、リンクに rel を追加できます。ソースと削除の警告を調べてください。次に、HTML を提供しない環境を通じてプレーンのみの表現を貼り付けます。
プレーンな結果には、選択部分に挿入された文字が含まれています。ブロック構造は、元の HTML から復元されるのではなく、ブラウザーの編集ホストによって決定されます。単語と行の境界を要素とは別に比較します。この演習では、バイトごとのコピーではなく、表現間の変換を示します。
これでカバーされないもの — クリップボード API、画像、プラットフォームのショートカット、または権限マトリックス
この記事では、navigator.clipboard プログラミング、権限プロンプト、クリップボード画像、ファイル、RTF、モバイル ショートカット、またはクロスプラットフォーム設定マトリックスについては説明しません。また、傍受されたリッチ ペーストによって任意の敵対的な HTML を安全に公開できるとも主張していません。
ToolAcre のサニタイザーは範囲が狭く、パーサーの差分を認識します。そのサンドボックスはローカル プレビューでの実行をブロックしますが、コピーされた HTML はその環境から離れます。受信サーバーには適切なパーサーベースのサニタイザーと出力ポリシーが必要ですが、ユーザーは未レビューのページにシークレットを貼り付けないようにする必要があります。
要点: ペーストはコピーではなく翻訳です — モデルと、ToolAcre の HTML WYSIWYG エディターを使用して翻訳によって何が生成されたかを検査する方法を要約します。
リッチ ペーストは翻訳です。ソースは表現を書き込み、宛先は表現を選択し、挿入前に ToolAcre が選択した HTML をフィルタリングします。このシーケンスを理解すると、クリップボードが壊れているものとして扱われずにフォーマットが消える理由が説明されます。
代表的なフィクスチャを使用し、結果のソースを検査し、クリーンアップによって意味が失われる可能性がある場合は元のコンテンツを保存します。プレーンペーストはプレゼンテーションをリセットするのに役立ちますが、リッチペーストは構造を保持できます。どちらの方法でも、宛先が衛生管理、互換性テスト、編集上のレビューから解放されるわけではありません。