Format Papan Klip HTML

Persyaratan untuk mentransfer teks HTML dengan cara clipboard berbeda tergantung pada skenario. Artikel ini berkaitan dengan pemotongan dan penempelan fragmen dokumen HTML. Mungkin ada persyaratan untuk mentransfer seluruh dokumen HTML melalui clipboard; namun, artikel ini didorong oleh persyaratan untuk mentransfer fragmen teks HTML yang dipilih. Dengan demikian, metode yang mengharuskan seluruh dokumen HTML untuk disalin ke clipboard dipandang terlalu berat.

Format clipboard CF_HTML memungkinkan fragmen teks HTML mentah dan konteksnya (yaitu HTML luar) untuk disimpan di clipboard sebagai ASCII. Ini memungkinkan konteks fragmen HTML, yang terdiri dari semua tag sekitarnya sebelumnya, untuk diperiksa oleh aplikasi sehingga tag di sekitar fragmen HTML dapat dicatat dengan atributnya. Meskipun terserah aplikasi untuk memutuskan cara menginterpretasikan fragmen tersebut, beberapa pedoman dasar disertakan di sini berdasarkan implementasi IE4/MSHTML.

Nama resmi clipboard (string yang digunakan oleh RegisterClipboardFormat) adalah "HTML Format".

Deskripsi

CF_HTML adalah format clipboard teks, meskipun selalu menggunakan pengodean UTF-8. Perhatikan bahwa penggunaan UTF-8 di sini adalah pengecualian untuk aturan umum bahwa Windows API menggunakan UTF-16 untuk mewakili string teks, terutama string yang dapat dibaca manusia (yaitu dapat dilokalkan).

Anda dapat menggambarkan tata letak umum atau sintaks papan klip CF_HTML dalam bentuk pseudo-Backus–Naur seperti:

<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"

Header deskripsi dan Offset

Header deskripsi menyertakan nomor dan offset versi clipboard, yang menunjukkan di mana konteks dan fragmen dimulai dan diakhapi. Deskripsi adalah daftar kata kunci teks ASCII diikuti oleh string dan dipisahkan oleh titik dua (:).

• Version: nomor versi vv clipboard. Versi awal Version:0.9. Pada Windows 10 20H2 ini sekarang Version:1.0.
• StartHTML: Offset (dalam byte) dari awal clipboard ke awal konteks, atau -1 jika tidak ada konteks.
• EndHTML: Offset (dalam byte) dari awal clipboard ke akhir konteks, atau -1 jika tidak ada konteks.
• StartFragment: Offset (dalam byte) dari awal clipboard ke awal fragmen.
• EndFragment: Offset (dalam byte) dari awal clipboard ke akhir fragmen.
• StartSelection: Opsional. Offset (dalam byte) dari awal clipboard ke awal pilihan.
• EndSelection: Opsional. Offset (dalam byte) dari awal clipboard ke akhir pilihan.

Kata kunci StartSelection dan EndSelection bersifat opsional dan keduanya harus dihilangkan jika Anda tidak ingin aplikasi menghasilkan informasi ini.

Revisi format clipboard CF_HTML di masa mendatang dapat memperluas header, misalnya, karena HTML dimulai pada offset StartHTML maka beberapa pasangan StartFragment dan EndFragment dapat ditambahkan nanti untuk mendukung pemilihan fragmen yang tidak bersebelahan.

Sintaks offset

Untuk kenyamanan program yang menghasilkan offset byte, nilai offset dapat secara opsional di-padding kiri dengan jumlah nol digit arbitrer '0'. Alasan untuk ini adalah bahwa program yang mengendus HTML untuk offset dapat menulis sepuluh (10) nol ke buffer outputnya untuk setiap kata kunci (misalnya StartHTML: 0000000000). Kemudian, ketika offset StartHTML yang tepat diketahui (misalnya, 71), program dapat menimpa nol paling kanan dengan "71" di buffer (misalnya menghasilkan StartHTML: 0000000071).

Satu-satunya set karakter yang didukung oleh clipboard adalah Unicode (UTF-8). Karena karakter pertama UTF-8 dan ASCII cocok, deskripsinya selalu ASCII, tetapi byte konteks (mulai dari StartHTML) dapat menggunakan karakter lain yang dikodekan dalam UTF-8.

Akhir baris dalam header format clipboard (<br> di atas) dapat diwakili oleh CRLF (Windows), LF (Unix), atau CR lone (archaic).

Fragmen, pilihan, dan konteksnya

Konteks

Konteks adalah dokumen HTML yang valid dan lengkap - meskipun ini tidak berarti seluruh dokumen HTML sumber asli yang berisi pilihan pengguna akan dibawa-ke verbatim; sebaliknya, itu bisa menjadi dokumen HTML minimal, tetapi terbentuk dengan baik.

Konteks ini berisi fragmen dan semua tag di sekitarnya sebelumnya (tag awal dan akhir; tag sekitar sebelumnya ini mewakili semua simpul induk fragmen, hingga simpul HTML). Artikel contoh di atas memiliki elemen <head> HTML lengkap yang mengizinkan penggunaan elemen <base href=""> dan <title>. Misalnya, elemen ini dapat disisipkan untuk mendapatkan informasi tambahan ini. Aplikasi yang menyalin fragmen HTML ke clipboard dapat memilih untuk membuat elemen <base href=""> untuk menyertakannya dalam konteks jika elemen seperti itu belum ada. Dengan cara ini, URI non-absolut dalam fragmen HTML dapat diselesaikan.

konteks bersifat opsional, karena informasi yang memadai disertakan dalam fragmen untuk penempelan dasar fragmen HTML untuk dilakukan. Jika konteks tidak disimpan, fragmen hanya disimpan dan StartHTML=EndHTML=-1.

Fragmen

Fragmen (<fragment-text> di atas) berisi fragmen HTML yang valid.

Fragmen HTML valid terdiri dari satu elemen HTML luar. Elemen ini mungkin berisi elemen HTML turunan asalkan disarangkan dengan benar. Misalnya, fragmen bisa menjadi elemen <div> tunggal yang berisi 3 elemen <p>. Fragmen yang terdiri dari elemen <span> yang berisi tiga elemen <p> tidak akan valid karena elemen <span> (elemen) tidak dapat berisi elemen tingkat blok sebagai turunan.

Dengan demikian, fragmen secara efektif mewakili area lebih besar di dalam layar, di mana pengguna membuat pilihan teks mereka (untuk menyalin, misalnya). Pilihan berisi teks yang dipilih ditambah tag pembuka dan atribut elemen apa pun yang memiliki tag akhir dalam teks yang dipilih, dan tag akhir di akhir fragmen untuk tag mulai apa pun yang disertakan. Ini semua informasi yang diperlukan untuk penempelan dasar fragmen HTML.

Fragmen harus didahului dan diikuti oleh komentar HTML <!--StartFragment--> dan <!--EndFragment--> untuk menunjukkan di mana fragmen dimulai dan berakhir; komentar HTML ini harus digunakan verbatim, tanpa karakter spasi putih dalam setiap komentar itu sendiri. Dengan demikian, awal dan akhir fragmen ditunjukkan oleh adanya komentar ini dan oleh header StartFragment dan EndFragment. Alat diharapkan menghasilkan informasi ini. Redundansi ini disengaja dan diperkenalkan untuk dapat menemukan awal fragmen (dari jumlah byte) dan menandai posisi fragmen langsung di pohon HTML.

Pilihan

pilihan bersifat opsional karena informasi yang memadai disertakan dalam fragmen untuk penempelan dasar. Jika pilihan tidak disimpan, StartSelection dan EndSelection tidak disimpan di header.

Jika ada, pilihan adalah rentang teks persis yang telah dipilih pengguna (dalam fragmen ); ini menambahkan lebih banyak informasi ke fragmen dengan menunjukkan teks yang dipilih dengan tepat, tanpa tag awal dan akhir yang terbentuk dengan baik dan seimbang dan tag akhir.

Ingat, pilihan dapat mewakili eksekusi teks yang dapat dimulai dalam elemen tertentu dan berakhir di berikutnya - atau leluhur - elemen. Akibatnya, tidak mungkin untuk mewakili pilihan teks menggunakan HTML.

Skenario

Skenario berikut menjelaskan bagaimana editor HTML IE4/MSHTML menangani pemotongan dan tempel HTML; aplikasi lain mungkin atau mungkin tidak mengikuti skenario ini. Format clipboard yang dijelaskan di sini dimaksudkan untuk memungkinkan fleksibilitas tentang bagaimana aplikasi memilih untuk berfungsi. (Skenario ini hanya menunjukkan HTML yang baik, yaitu, tidak ada tag yang tumpang tindih.)

Skenario 1 - Fragmen Sederhana HTML

Asumsikan teks HTML berikut:

<body>This is normal. <b>This is bold.</b> <i><b>This is bold italic.</b> This is italic.</i></body>

Ini akan muncul sebagai berikut:

Ini normal. Ini tebal.Ini miring tebal.Ini miring.

Ketika pengguna Anda telah memuat teks HTML di atas ke dalam aplikasi berbasis MSHTML (MSHTML, alias Trident, adalah mesin Internet Explorer), MSHTML menangani penyalinan substring HTML sebagai berikut:

1. Pengguna memilih teks tanpa spasi kosong di depan atau di belakang, misalnya "tebal Ini miring tebal Ini" dari contoh di atas.
2. Untuk menyalin teks ke clipboard, pengguna mengklik tombol perintah Salin.

MSHTML akan menempatkan teks HTML ini ke dalam Windows Clipboard sebagai berikut:

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>

Skenario 2 - Fragmen tabel dalam HTML

Asumsikan teks HTML berikut:

<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>

Ini akan muncul sebagai berikut:

Kepala 1	Item 1	Item 2	Item 3	Item 4
	Item 5	Item 6	Item 7	Item 8
Kepala 2	Item 9	Item 10	Item 11	Item 12

Cara MSHTML menangani penyalinan substring HTML dari tabel

Saat pengguna menggunakan mouse mereka untuk membuat pilihan teks yang mencakup sel tabel Item 6, Item 7, Item 10, dan Item 11. Pilihan ini kemudian disalin ke clipboard.

Yang berikut ini adalah apa yang akan ada di clipboard (perhatikan ini adalah interpretasi IE4/MSHTML). Pemisah baris telah ditambahkan untuk kejelasan.

<!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>

Pilihan, seperti yang dibatasi oleh StartSelection dan EndSelection, ditampilkan dalam huruf tebal.

Skenario 3 - Menempelkan fragmen daftar yang diurutkan <ol> ke dalam teks biasa

Asumsikan teks HTML berikut:

<BODY><OL TYPE="a"><LI>Item 1<LI>Item 2<LI>Item 3<LI>Item 4<LI>Item 5<LI>Item 6</OL></BODY>

Ini akan muncul sebagai berikut:

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5
6. Item 6

Cara MSHTML menangani penyalinan substring item daftar bernomor HTML

1. Pengguna membuat pilihan teks dari awal item 3, melalui item 4, dan ke akhir item 5. Pengguna memanggil perintah Salin.
2. HTML berikut ada di clipboard (hentian baris ditambahkan untuk kejelasan) - lokasi yang tepat dari komentar <!--Star/EndFragment --> tergantung pada bagaimana pengguna menangani logika pemilihan teks browser mereka:

<html>
<body>
<ol>
<!-- StartFragment-->
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<!-- EndFragment-->
</ol>
</body>
</html>

Jika fragmen ini sekarang akan ditempelkan ke dalam dokumen kosong, HTML berikut akan dibuat:

<body>
<ol>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>

Ini akan muncul sebagai berikut:

1. Item 3
2. Item 4
3. Item 5

Skenario 5 - Menempelkan wilayah yang dipilih sebagian

Asumsikan teks HTML berikut:

<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>

Ini akan muncul sebagai berikut:

IE4/MSHTML adalah Editor WYSIWYG yang mendukung:

• Memotong
• Menyalin
• Pasta

Ini adalah Alat Hebat!

Cara MSHTML menangani penyalinan substring item daftar HTML

Pengguna menggunakan mouse mereka untuk menyeret pilihan teks, misalnya "Editor WYSIWYG yang mendukung: Cut Cop". Seolah-olah teks biasa, pilihan tersebut akan terlihat seperti fragmen HTML rusak ini:

WYSIWYG Editor, which supports:</p>
<ul>
  <li>Cut</li>
  <li>Cop

Ketika pengguna menekan tombol perintah Salin, clipboard mereka akan terlihat seperti ini (pemisah baris telah ditambahkan untuk kejelasan; teks tebal menunjukkan apa yang sebenarnya dipilih pengguna):

<html>
<body>
<!-- StartFragment-->
<p>WYSIWYG Editor, which supports</p>
<ul>
	<li>Cut</li>
	<li>Cop</li>
</ul>
<!-- EndFragment-->
</body>
</html>

Amati bahwa:

• Teks sebelum "WYSIWYG" dihapus.
• Item daftar (<li>Paste</li>) dihapus karena tidak ada dalam pilihan pengguna.
• "y" dari "Salin" dihapus.

Lihat juga

Clipboard