開発者ツール · HTML WYSIWYG エディター
Word または Google ドキュメントから Web エディターに貼り付けるとどうなるか
· 仕組み
html コンテンツ編集可能 テキストクリーンアップ
mso スタイルからラッパー要素やフォント スタックまで、リッチ テキスト ペーストに含まれる内容について説明し、サイトに到達する前に結果のマークアップを読み取る方法を示します。
Word では問題なく表示されました — スペースとフォントがサイトのデザインに反している貼り付けられた記事で開きます
ワード プロセッサからコピーされた段落は、ソースでは洗練されているように見えても、サイトと競合するフォント、スペース、ラッパーが付いている場合があります。 ToolAcre はそのプレゼンテーションを完全には保存しません。その貼り付けリスナーは、元のリッチ マークアップが挿入される前に操作をインターセプトし、代わりにフィルター処理された表現を選択します。
重要な証拠はソース ビューであり、第一の視覚的印象が元のドキュメントに似ているかどうかではありません。エディターは意図的に狭くされています。見出し、段落、強調、リスト、引用、コードのような要素とリンクは存続できますが、レイアウト コンテナー、クラス名、ID、およびインライン スタイル属性は出力コントラクトに属しません。
クリップボードにはテキスト以上のものが保存されます。リッチ テキスト コピーにはプレーン テキストのほかに HTML フレーバーが含まれていることを説明します。
クリップボードは、1 回のコピー操作で `text/html` と `text/plain` を公開できます。ハンドラーは両方を要求します。 HTML ペイロードが存在する場合、その文字列をサニタイズし、`insertHTML` を使用して書き換えられたフラグメントを挿入します。リッチ HTML が存在しない場合にのみ、`insertText` を持つプレーン ペイロードが挿入されます。
この優先順位はこのパネルのコードで証明されており、すべてのアプリケーションについての普遍的な記述ではありません。リッチなペーストが見た目を損ないながらリストを維持できる理由が説明されています。ソース アプリケーションはクリップボード HTML を作成しましたが、ToolAcre の許可リストによって、どの部分が編集可能な画面に許可されるかが決定されます。
このエディターがリッチ ペーストから削除するもの: サポートされていない要素、属性、コメント
サポートされていない要素は 2 つの方法で処理されます。未知の通常のラッパーはラップが解除されるため、単語は残りますが、スクリプト、スタイル、iframe、フォーム、SVG、MathML、およびその他の危険なコンテナーまたは非エディターのコンテナーはコンテンツとともに削除されます。コメントと doctype も、ドラフトには組み込まれずに破棄されます。
属性は 2 番目のゲートに面しています。許可される属性には要素ごとに名前が付けられるため、クラス、ID、スタイル、データ属性、およびすべてのイベント ハンドラーは削除されます。これは、ToolAcre がペーストをフィルタリングした後、ソース固有のクラス名とインライン プレゼンテーションが宛先スタイルシートと戦うことができないことを意味しますが、有用なソース スタイルも消える可能性があります。
ソース固有のラッパーとスタイルがホワイトリストに残らない理由
リポジトリは、キャプチャされた Word または Google Docs のフィクスチャを提供しないため、この記事では、特定のリリースの正確な `mso-` クラス、内部 ID、またはラッパー シーケンスを作成しません。ホワイトリストによって証明された結果は、どのソース アプリケーションが提供したかに関係なく、クラスとスタイルが削除されることを示しています。
ソースに依存しないルールは、脆弱なカタログよりも強力な編集上の指針となります。貼り付け後は削除通知を確認してください。サポートされていないラッパー、禁止された属性、拒否された URL などの固有の理由が記録されます。このレポートは、すべてのフラグメントを最初に生成したアプリケーションを識別することなく、この実装が何を破棄したかを示します。
実用的な例: 3 つの段落を貼り付け、フィルターされたマークアップを読み取ります
3 つの短い段落をコピーし、真ん中の文を太字にし、最後の文をリストにします。貼り付け後、ソースモードに切り替えます。パラグラフ、strong、ul、li 要素はホワイトリスト内にありますが、周囲の div はラップ解除され、style 属性は消えます。従来の b および i タグは、strong および em に正規化されます。
ここで、使い捨てソース サンプルに安全でないイベント属性を追加し、ビジュアル モードに戻ります。属性は、ソースが DOM になる前に削除されます。これは、敵対的な投稿の安全な公開ではなく、編集の境界を示しています。このプロジェクトは、パーサーの差分について明示的に警告し、信頼できないコンテンツに対して適切なサーバー側サニタイザーを必要とします。
プレーンテキストのペーストは、クリップボードが HTML フレーバーを提供しない場合にのみ使用されます。
プレーンテキストの挿入はフォールバックであり、このツールバーでユーザーが選択できる「書式設定なしで貼り付け」コマンドではありません。クリップボードが HTML を提供する場合、ToolAcre はその分岐を実行します。ブラウザまたはオペレーティング システムのショートカットはプレーンのみの貼り付けを公開する場合がありますが、リポジトリは特定のショートカットの動作を定義または保証しません。
テキストのみが使用可能な場合、`insertText` はブラウザーにそれらの文字をキャレットに配置するように要求します。その後作成された段落構造は、引き続きブラウザーの編集動作の影響を受けます。別のアプリケーションからの改行が自動的に CMS が期待する構造になると仮定するのではなく、ソース ビューを使用して意図的な見出しやリストを追加します。
これでカバーされないもの — 自動クリーンアップ ルール、CMS 固有の貼り付けフィルター、追跡された変更の保存
このワークフローでは、追跡された変更、コメント、ページ レイアウト、フォント、色、表、または画像は保存されません。許可されたイメージは送信リクエストとエラー ハンドラー サーフェイスを作成するため、イメージは意図的に存在しません。また、エディターには、1 つのオフィス スイートへの忠実性を保証するソース固有のクリーンアップ プロファイルやスイッチもありません。
ローカルに貼り付けても、最終的な宛先が同じサブセットを受け入れることが証明されるわけではありません。 CMS は、さらに多くのタグを削除したり、リンクを書き換えたり、独自のポリシーを強制したりする場合があります。エディターの出力と目的のドキュメントを比較し、サポートされていない形式を失うと単なる表示ではなく情報が削除される場合は、元のコピーを保管してください。
要点: 公開する前に確認する — 検査の習慣と、ToolAcre の HTML WYSIWYG エディターを使用してローカルに貼り付けてマークアップをどこにでも移動する前に確認できる方法をまとめています。
公開する前に確認します。代表的な非機密フラグメントを貼り付け、削除警告を読み、ソースを調べ、フィルター処理された結果をプレビューします。 ToolAcre は、外国のプレゼンテーションをサイトに黙って持ち込むのではなく、1 つの明示的な許可リストを提供します。これによりクリーンアップが可視化されますが、任意の HTML が安全であると保証されるわけではありません。
重要な構造が失われた場合は、サポートされている見出し、段落、リスト、強調、リンクを使用して構造を再構築します。ターゲットが受け入れる量が少ない場合は、そこでさらに単純化します。正しいアーティファクトは、ソース ドキュメントの視覚的に最も近い模倣ではありません。意味と宛先ポリシーの両方が理解されているマークアップがレビューされます。