HTML クリップボードの形式
クリップボードを使用して HTML テキストを転送するための要件は、シナリオによって異なります。 この記事では、HTML ドキュメントのフラグメントの切り取りと貼り付けについて説明します。 クリップボードを介して HTML ドキュメント全体を転送するための要件がある場合があります。ただし、この記事は、選択した HTML テキストのフラグメントを転送する必要があります。 そのため、HTML ドキュメント全体をクリップボードにコピーする必要があるメソッドは、重すぎると見なされます。
CF_HTML
クリップボード形式を使用すると、生の HTML テキストとそのコンテキスト (つまり外部 HTML) のフラグメントを ASCII としてクリップボードに格納できます。 これにより、上記の周囲のすべてのタグで構成される HTML フラグメントのコンテキストをアプリケーションで調べて、HTML フラグメントの周囲のタグを属性で確認できます。 このようなフラグメントを解釈する方法はアプリケーションによって決まりますが、IE4/MSHTML の実装に基づいていくつかの基本的なガイドラインがここに含まれています。
クリップボードの正式な名前 (RegisterClipboardFormat
で使用される文字列) は "HTML Format
" です。
形容
CF_HTML
はテキスト クリップボード形式ですが、常に UTF-8 エンコードを使用します。 ここでの UTF-8 の使用は、Windows API がテキスト文字列 、特に人間が判読できる (ローカライズ可能な) 文字列を表すために UTF-16 を使用するという一般的な規則の例外であることに注意してください。
次のように、CF_HTML
クリップボードの一般的なレイアウトまたは構文を擬似 Backus-Naur 形式で記述できます。
手記
この文法は非規範的です**
<cf-html> ::= <description-header> <context>
<context> ::= [<preceding-context>] <fragment> [<trailing-context>]
<description-header> ::= "Version:" <version> <br> ( <header-offset-keyword> ":" <header-offset-value> <br> )*
<header-offset-keyword> ::= "StartHTML" | "EndHTML" | "StartFragment" | "EndFragment" | "StartSelection" | "EndSelection"
<header-offset-value> ::= { Base 10 (decimal) integer string with optional _multiple_ leading zero digits (see "Offset syntax" below) }
<version> ::= "0.9" | "1.0"
<fragment> ::= <fragment-start-comment> <fragment-text> <fragment-end-comment>
<fragment-start-comment> ::= "<!--StartFragment -->"
<fragment-end-comment> ::= "<!--EndFragment -->"
<preceding-context> ::= { Arbitrary HTML }
<trailing-context> ::= { Arbitrary HTML }
<fragment-text> ::= { Arbitrary HTML }
<br> ::= "\r" | "\n" | "\r\n"
説明ヘッダーとオフセット
description ヘッダーには、クリップボードのバージョン番号とオフセットが含まれており、コンテキストとフラグメントの開始位置と終了位置を示します。 説明は、ASCII テキスト キーワードの後に文字列が続き、コロン (:) で区切られたリストです。
-
Version
: クリップボードの vv バージョン番号。 開始バージョンがVersion:0.9
。 Windows 10 20H2 の時点で、これは現在Version:1.0
です。 -
StartHTML
: クリップボードの先頭からコンテキストの先頭までのオフセット (バイト単位)、またはコンテキストがない場合は-1
。 -
EndHTML
: クリップボードの先頭からコンテキストの末尾までのオフセット (バイト単位)、またはコンテキストがない場合は-1
。 -
StartFragment
: クリップボードの先頭からフラグメントの先頭までのオフセット (バイト単位)。 -
EndFragment
: クリップボードの先頭からフラグメントの末尾までのオフセット (バイト単位)。 -
StartSelection
: 省略可能。 クリップボードの先頭から選択範囲の先頭までのオフセット (バイト単位)。 -
EndSelection
: 省略可能。 クリップボードの先頭から選択範囲の末尾までのオフセット (バイト単位)。
StartSelection
キーワードと EndSelection
キーワードは省略可能であり、アプリケーションでこの情報を生成しない場合は両方とも省略する必要があります。
CF_HTML
クリップボード形式の今後のリビジョンでは、ヘッダーが拡張される可能性があります。たとえば、HTML は StartHTML
オフセットから始まり、後で複数の StartFragment
と EndFragment
のペアを追加して、フラグメントの連続しない選択をサポートできます。
オフセット構文
バイト オフセットを生成するプログラムの便宜上、オフセット値は必要に応じて、任意の量の 0 桁の '0'
で左に埋め込む場合があります。 その理由は、オフセットの HTML をスニッフィングするプログラムが、各キーワードの出力バッファーに 10 個 (10 個) のゼロを書き込むことができるからです (例: StartHTML: 0000000000
)。 その後、正確な StartHTML
オフセットがわかっている場合 (例: 71)、プログラムはバッファー内の右端のゼロを "71" で上書きできます (たとえば、StartHTML: 0000000071
になります)。
クリップボードでサポートされている文字セットは Unicode (UTF-8) のみです。 UTF-8 と ASCII の最初の文字が一致するため、説明は常に ASCII ですが、コンテキストのバイト数 (StartHTML
以降) では、UTF-8 でエンコードされた他の文字を使用できます。
クリップボード形式ヘッダー (上記<br>
) の行の末尾は、CRLF (Windows)、LF (Unix)、または Lone CR (アーキック) で表されます。
フラグメント、選択、およびそのコンテキスト
要素 | 説明ヘッダー | 開始位置と終了文字位置に有効な HTML が必要です |
---|---|---|
文脈 |
StartHTML と EndHTML |
はい |
断片 |
StartFragment と EndFragment |
はい |
選定 |
StartSelection と EndSelection |
いいえ |
文脈
コンテキスト は有効で完全な HTML ドキュメントです。ただし、ユーザーの選択を含む元のソース HTML ドキュメント全体が逐語的に引き継がされることを意味するものではありません。逆に、最小限の、しかし整形式の HTML ドキュメントにすることができます。
この コンテキスト には、フラグメント と、その前のすべての周囲のタグ (開始タグと終了タグ、 これらの先行する周囲のタグは、HTML ノードまで、フラグメントのすべての親ノードを表します) が含まれています。 上記の記事例には、<base href="">
要素と <title>
要素の使用を許可する完全な HTML <head>
要素があります。 たとえば、この要素を挿入して、この追加情報を取得できます。 HTML のフラグメントをクリップボードにコピーするアプリケーションは、そのような要素がまだ存在しない場合にコンテキストに含める <base href="">
要素を作成することを選択できます。 これにより、HTML フラグメント内の非絶対 URI を解決できます。
HTML フラグメントの基本的な貼り付けのために十分な情報がフラグメントに含まれるため、コンテキスト は省略可能です。 コンテキストが格納されていない場合は、フラグメントのみが格納され、StartHTML=EndHTML=-1
。
断片
フラグメント (上記<fragment-text>
) には、有効な HTML フラグメントが含まれています。
有効な HTML フラグメントは、1 つの外部 HTML 要素で構成されます。 この要素は、正しく入れ子になっている場合に、子孫 HTML 要素を含めることができます。 たとえば、フラグメントは、3 つの <p>
要素を含む単一の <div>
要素である可能性があります。 3 つの <p>
要素を含む <span>
要素で構成されるフラグメントは、<span>
要素 (要素) に子としてブロック レベルの要素を含めることができないため、無効になります。
したがって、フラグメントは、画面上 大きな領域を効果的に表し、ユーザーはテキストを選択しました (コピーなど)。 選択範囲には、選択したテキストに加えて、選択したテキスト内に終了タグがある要素の開始タグと属性、および含まれる開始タグのフラグメントの末尾にある終了タグが含まれます。 これは、HTML フラグメントの基本的な貼り付けに必要なすべての情報です。
フラグメント の前に記述し、その後に HTML コメント <!--StartFragment-->
し、フラグメントの開始位置と終了位置を示す <!--EndFragment-->
する必要があります。これらの HTML コメントは、各コメント自体 空白文字を含まない逐語的なで使用する必要があります。 したがって、フラグメントの開始と終了は、これらのコメント の存在によって示され、StartFragment
および EndFragment
ヘッダーによって されます。 ツールは、この情報を生成することが期待されます。 この冗長性は意図的なものであり、フラグメントの開始を (バイトカウントから) 見つけて、HTML ツリー内でフラグメントの位置を直接マークできるようにするために導入されました。
選定
基本的な貼り付けに十分な情報がフラグメントに含まれているため、選択 は省略可能です。 選択範囲が格納されていない場合、StartSelection
と EndSelection
の両方がヘッダーに格納されません。
存在する場合、選択 は、ユーザーが選択した テキスト範囲 (フラグメント内) です。これにより、適切な形式でバランスの取れた開始タグと終了タグと終了タグを せずに 正確に選択されたテキストを示すことによって、フラグメントにさらに情報が追加されます。
の選択 は、任意の要素から始まり、後続の要素または先祖要素 で終わるテキストの実行を表すことができます。 したがって、HTML を使用してテキストの選択を表すことはできません。
シナリオ
次のシナリオでは、IE4/MSHTML HTML エディターが HTML の切り取りと貼り付けを処理する方法について説明します。他のアプリケーションは、これらのシナリオに従う場合と従わない場合があります。 ここで説明するクリップボード形式は、アプリケーションがどのように機能するかを柔軟に選択できるようにするためのものです。 (これらのシナリオでは、適切な HTML、つまり重複するタグがないことを示しています)。
シナリオ 1 - HTML の単純なフラグメント
次の HTML テキストを想定します。
<body>This is normal. <b>This is bold.</b> <i><b>This is bold italic.</b> This is italic.</i></body>
これは次のように表示されます。
これは正常です。 太字です。太字斜体です。斜体です。
ユーザーが上記の HTML テキストを MSHTML ベースのアプリケーション (MSHTML、 Trident、 Internet Explorer のエンジン) に読み込んだ場合、MSHTML は HTML の部分文字列のコピーを次のように処理します。
- ユーザーは、前または末尾の空白を含まないテキストを選択します 。たとえば、上の例の "bold This is bold italic This" です。
- テキストをクリップボードにコピーするには、[コピー] コマンド ボタンをクリックします。
MSHTML は、次のようにこの HTML テキストを Windows クリップボードに配置します。
Version:1.0
StartHTML:0121
EndHTML:0272
StartFragment:0006
EndFragment:0106
StartSelection:0180
EndSelection:0225
<html><!--StartFragment--><body>This is normal. <b>This is bold.</b> <i><b>This is bold italic.</b> This is italic.</i></body><!--EndFragment--></html>
シナリオ 2 - HTML でのテーブルのフラグメント
次の HTML テキストを想定します。
<BODY><TABLE BORDER><TR><TH ROWSPAN=2>Head1</TH><TD>Item 1</TD><TD>Item 2</TD><TD>Item 3</TD><TD>Item 4</TD></TR><TR><TD>Item 5</TD><TD>Item 6</TD><TD>Item 7</TD><TD>Item 8</TD></TR><TR><TH>Head2</TH><TD>Item 9</TD><TD>Item 10</TD><TD>Item 11</TD><TD>Item 12</TD></TR></TABLE></BODY>
これは次のように表示されます。
ヘッド 1 項目 1 項目 2 項目 3 項目 4 項目 5 項目 6 項目 7 項目 8 ヘッド 2 項目 9 項目 10 項目 11 項目 12
テーブルからの HTML の部分文字列のコピーを MSHTML が処理する方法
ユーザーがマウスを使用して、項目 6 、項目 7、項目 10、および 項目 11表のセルをカバーするテキスト選択を行う場合。 この選択内容はクリップボードにコピーされます。
次に示す内容は、クリップボードに表示されます (これは IE4/MSHTML の解釈であることに注意してください)。 わかりやすくするために改行が追加されました。
<!DOCTYPE
<HTML>
<BODY>
<TABLE BORDER>
<!--StartFragment-->
**<TR>
<TD>Item 6</TD>
<TD>Item 7</TD>
</TR>
<TR>
<TD>Item 10</TD>
<TD>Item 11</TD>
</TR>**
<!--EndFragment-->
</TABLE>
</BODY>
</HTML>
StartSelection
と EndSelection
で区切られた選択範囲は太字で表示されます。
シナリオ 3 - 順序付けられたリスト <ol>
のフラグメントをプレーン テキストに貼り付ける
次の HTML テキストを想定します。
<BODY><OL TYPE="a"><LI>Item 1<LI>Item 2<LI>Item 3<LI>Item 4<LI>Item 5<LI>Item 6</OL></BODY>
これは次のように表示されます。
- 項目 1
- 項目 2
- 項目 3
- 項目 4
- 項目 5
- 項目 6
MSHTML が HTML 番号付きリスト 項目の部分文字列のコピーを処理する方法
- ユーザーは、項目 3の先頭から、項目 4 まで、および項目 5 末尾までテキストを選択します。 ユーザーが Copy コマンドを呼び出します。
- 次の HTML はクリップボードに含まれています (わかりやすくするために改行が追加されます) -
<!--Star/EndFragment -->
コメントの正確な場所は、ユーザーがブラウザーのテキスト選択ロジックをどのように処理したかによって異なります。
<html>
<body>
<ol>
<!-- StartFragment-->
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<!-- EndFragment-->
</ol>
</body>
</html>
このフラグメントを空のドキュメントに貼り付ける場合は、次の HTML が作成されます。
<body>
<ol>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>
これは次のように表示されます。
- 項目 3
- 項目 4
- 項目 5
シナリオ 5 - 部分的に選択したリージョンを貼り付ける
次の HTML テキストを想定します。
<p>IE4/MSHTML is a WYSIWYG Editor that supports:</p>
<ul><li>Cut<li>Copy<li>Paste</ul>
<p>This is a Great Tool!</p>
これは次のように表示されます。
IE4/MSHTML は、次をサポートする WYSIWYG エディターです。
- 切る
- 写し
- 糊
これは素晴らしいツールです!
MSHTML が HTML リスト 項目の部分文字列のコピーを処理する方法
ユーザーは、マウスを使用してテキストの選択をドラッグします(例: "WYSIWYG Editor that supports: Cut Cop")。 プレーンテキストであるかのように、その選択は次の壊れた HTML フラグメントのようになります。
WYSIWYG Editor, which supports:</p>
<ul>
<li>Cut</li>
<li>Cop
ユーザーが [コピー] コマンド ボタンを押すと、クリップボードは次のようになります (わかりやすくするために改行が追加されています。太字のテキストは、ユーザーが実際に選択した内容を示します)。
<html> <body> <!-- StartFragment--> <p>WYSIWYG Editor, which supports</p> <ul> <li>Cut</li> <li>Cop</li> </ul> <!-- EndFragment--> </body> </html>
次の点を確認します。
- "WYSIWYG" より前のテキストが削除されました。
- リスト アイテム (
<li>Paste</li>
) は、ユーザーの選択に含まれなかったため削除されました。 - "コピー" の "y" が削除されました。