<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HTML Clipboard Format</title>
<meta NAME="description" CONTENT="HTML Clipboard Format" />
<meta NAME="keywords" CONTENT="Internet Tools &amp; Technologies" />
<meta NAME="robots" CONTENT="all" />
<meta NAME="MS.LOCALE" CONTENT="EN-US" />
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1" />
<meta NAME="Author" CONTENT="InetSDK" />
<script LANGUAGE="JavaScript"><!--
// -----------------------------------------------------------
// Client-side BrowserData constructor
// Populated using data from server-side oBD object to avoid redundancy
// -----------------------------------------------------------
function BrowserData()
{
this.userAgent = "Mozilla/4.0 (compatible; MSIE 4.01; Windows 98)";
this.browser = "MSIE";
this.majorVer = 4;
this.minorVer = "01";
this.betaVer = "0";
this.platform = "98";
this.getsNavBar = true;
this.doesActiveX = true;
}
var oBD = new BrowserData();
//--></script>
<script LANGUAGE="JavaScript"><!--
// if workshop and not vroot, assign "/workshop/" to sBucketRoot
// rename sVRoot
// var sBucketRoot = "/workshop/networking/";
//--></script>
<link REL="stylesheet" TYPE="text/css" HREF="/msdn-online/shared/css/ie4.css" />
<script LANGUAGE="JScript"><!--
function CommonLoad()
{
if ("function" == typeof(InitNavLinks)) InitNavLinks();
if ("function" == typeof(CheckToTop)) CheckToTop();
if ("function" == typeof(RemoveLastPipe)) RemoveLastPipe();
}
//--></script>
<meta NAME="MS-HAID" CONTENT="_inet_HTML_Clipboard_Format">
</head>
<body TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BGCOLOR="#FFFFFF">
<p><a NAME="bk_clipboard"></a></p>
<div CLASS="clsDocBody">
<h1><a NAME="ch_htmlclipboard">HTML Clipboard Format</a></h1>
<hr SIZE="1">
<p>This article discusses cutting and pasting fragments of an HTML document. The CF_HTML
clipboard format allows a fragment of raw HTML text and its context to be stored on the
clipboard as ASCII. This allows the context of the HTML fragment, which consists of all
preceding and surrounding tags, to be examined by an application so that the surrounding
tags can be noted with their attributes. Although it is up to an application to interpret
such fragments, some basic guidelines are included here based on MSHTML implementations.</p>
<p>This article covers the following topics:
<ul>
<li><a CLASS="tctop"
HREF="/workshop/networking/clipboard/htmlclipboard.asp#Overview of CF_HTML">Overview of
CF_HTML</a> </li>
<li><a CLASS="tctop" HREF="/workshop/networking/clipboard/htmlclipboard.asp#Scenarios">Scenarios</a></li>
</ul>
<h2><a NAME="Overview of CF_HTML">Overview of CF_HTML</a></h2>
<p>CF_HTML is entirely text format and uses the transformation format UTF-8. It includes a
description, a context, and within the context, the fragment. The format name of a
clipboard containing CF_HTML data is HTML Format. Therefore, if you use functions such as <a
HREF="/workshop/external_Win32.asp#_win32_RegisterClipboardFormat">RegisterClipboardFormat</a>,
pass &quot;HTML Format&quot; in the format name parameter. This section gives a code
example of a clipboard using CF_HTML and discusses the three components of the CF_HTML
clipboard format.</p>
<p>The following is an example of a clipboard:</p>
<pre CLASS="clsCode">
Version:0.9
StartHTML:71
EndHTML:170
StartFragment:140
EndFragment:160
<b>StartSelection:140</b>
<b>EndSelection:160</b>
&lt;!DOCTYPE&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;The HTML Clipboard&lt;/TITLE&gt;
&lt;BASE HREF=&quot;http://sample/specs&quot;&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;!--StartFragment --&gt;
<b>&lt;P&gt;The Fragment&lt;/P&gt;</b>
&lt;!--EndFragment --&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
<h3>Description</h3>
<p>The description includes the clipboard version number and offsets, indicating where the
context and the fragment start and end. The description is a list of ASCII text keywords
followed by a string and separated by a colon
).</p>
<table CLASS="clsStd">
<tr>
<td>Version <i>vv</i></td>
<td>Version number of the clipboard. Starting version is 0.9. </td>
</tr>
<tr>
<td>StartHTML</td>
<td>Byte count from the beginning of the clipboard to the start of the context, or -1 if
no context.</td>
</tr>
<tr>
<td>EndHTML</td>
<td>Byte count from the beginning of the clipboard to the end of the context, or -1 if no
context.</td>
</tr>
<tr>
<td>StartFragment</td>
<td>Byte count from the beginning of the clipboard to the start of the fragment.</td>
</tr>
<tr>
<td>EndFragment</td>
<td>Byte count from the beginning of the clipboard to the end of the fragment.</td>
</tr>
<tr>
<td>StartSelection</td>
<td>Byte count from the beginning of the clipboard to the start of the selection. </td>
</tr>
<tr>
<td>EndSelection</td>
<td>Byte count from the beginning of the clipboard to the end of the selection.</td>
</tr>
</table>
<p>The StartSelection and EndSelection keywords are optional because sufficient
information for basic pasting is included in the fragment description. However, the
selection information indicates the exact HTML area the user has selected. This adds more
information to the fragment description. </p>
<p>Other information may be added in the description section. For example, multiple pairs
of StartFragment/EndFragment could be added to support noncontiguous selection of
fragments.</p>
<p>The only character set supported by the clipboard is Unicode in its UTF-8 encoding.
Because the first characters of UTF-8 and ASCII match, the description is always ASCII,
but the bytes of the context (starting at StartHTML) may use any other characters coded in
UTF-8. Ends of lines may be represented in a clipboard format header as Carriage Return
(CR), Carriage Return/Line Feed (CR/LF), or Line Feed (LF).</p>
<h3>Context</h3>
<p>When working with a complete document, the context is the entire HTML document. Because
this discussion is limited to copying and pasting a fragment of a document, the context is
the selected fragment and all preceding and surrounding start and end tags. These tags
represent all the parent nodes of the fragment, up to the HTML node. The context also
contains the complete <a HREF="/workshop/author/dhtml/reference/objects/HEAD.asp">HEAD</a>
element and allows the <a HREF="/workshop/author/dhtml/reference/objects/BASE.asp">BASE</a>
and <a HREF="/workshop/author/dhtml/reference/objects/TITLE.asp">TITLE</a> elements to be
included. Sufficient information is included in the fragment for a basic pasting
operation. However, if your application requires information concerning the tags
surrounding the fragment, you must store the context on the clipboard. </p>
<p>An application copying a fragment of HTML to the clipboard may choose to create a <b>BASE</b>
element to include in the context so that partial URLs in the fragment can be resolved.</p>
<h3>Fragment</h3>
<p>The fragment contains valid HTML representing the area the user has selected. This
includes the information required for basic pasting of an HTML fragment, as follows:
<ul>
<li>Selected text. </li>
<li>Opening tags and attributes of any element that has an end tag within the selected text.
</li>
<li>End tags that match the included opening tags. </li>
</ul>
<p>The fragment should be preceded and followed by the HTML comments
&lt;!--StartFragment--&gt; and &lt;!--EndFragment--&gt; (no space allowed between the !--
and the text) to indicate where the fragment starts and ends. So the start and end of the
fragment are indicated by these comments as well as by the StartFragment and EndFragment
byte counts. Though redundant, this makes it easier to find the start of the fragment
(from the byte count) and mark the position of the fragment directly in the HTML tree.</p>
<h2><a NAME="Scenarios">Scenarios</a></h2>
<p>The following scenarios describe how the MSHTML HTML editor handles HTML cutting and
pasting; other applications may or may not follow these scenarios. The clipboard format
described here is intended to allow flexibility for the way an application functions.
These scenarios show only well-formed HTML.</p>
<h3>Simple Fragment of HTML</h3>
<p>HTML text:</p>
<pre CLASS="clsCode">
&lt;BODY&gt; This is normal. &lt;B&gt;This is bold.&lt;/B&gt; &lt;I&gt;&lt;B&gt;This is bold italic.&lt;/B&gt;&lt;/I&gt;
&lt;I&gt;This is italic.&lt;/I&gt; &lt;/BODY&gt;
</pre>
<p>This appears as:</p>
<div Style="text-indent:&quot;1cm&quot;">
<p>This is normal. <b>This is bold.</b> <i><b>This is bold italic.</b></i> <i>This is
italic.</i></p>
</div>
<p>The text between the ** is selected and copied to the clipboard: </p>
<div Style="text-indent:&quot;1cm&quot;">
<p>This is normal. <b>This is </b>**<b>bold. <i>This is bold italic.</b> This</i>**<i> is
italic.</i> </p>
</div>
<p>In this scenario only the <a HREF="/workshop/author/dhtml/reference/objects/BODY.asp">BODY</a>
element and the <a HREF="/workshop/author/dhtml/reference/objects/HTML.asp">HTML</a>
element appear in the context as it precedes the selected fragment. Note that start tags
and end tags are included in the context. The selection, delimited by StartSelection and
EndSelection, is shown in bold. This is what will be on the clipboard (note this is
MSHTML's interpretation).</p>
<pre CLASS="clsCode">
Version:0.9
StartHTML:71
EndHTML:160
StartFragment:130
EndFragment:150
<b>StartSelection:130</b>
<b>EndSelection:150</b>
&lt;!DOCTYPE ...&gt;
&lt;HTML&gt;
&lt;BODY&gt;
&lt;!--StartFragment--&gt;
<b>&lt;B&gt;bold.&lt;/B&gt; &lt;I&gt;&lt;B&gt;This is bold italic.&lt;/B&gt;&lt;/I&gt; &lt;I&gt;This&lt;/I&gt; </b>
&lt;!--EndFragment--&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
<h3>Fragment of a Table in HTML</h3>
<p>HTML text:</p>
<pre CLASS="clsCode">
&lt;BODY&gt;&lt;TABLE BORDER&gt;&lt;TR&gt;&lt;TH
ROWSPAN=2&gt;Head1&lt;/TH&gt;&lt;TD&gt;Item 1&lt;/TD&gt;
&lt;TD&gt;Item 2&lt;/TD&gt; &lt;TD&gt;Item 3&lt;/TD&gt;
&lt;TD&gt;Item 4&lt;/TD&gt;&lt;/TR&gt;&lt;TR&gt;&lt;TD&gt;Item
5&lt;/TD&gt; &lt;TD&gt;Item 6&lt;/TD&gt; &lt;TD&gt;Item
7&lt;/TD&gt; &lt;TD&gt;Item
8&lt;/TD&gt;&lt;/TR&gt;&lt;TR&gt;&lt;TH&gt;Head2&lt;/TH&gt;&lt;TD&gt;Item
9&lt;/TD&gt; &lt;TD&gt;Item 10&lt;/TD&gt; &lt;TD&gt;Item
11&lt;/TD&gt; &lt;TD&gt;Item
12&lt;/TD&gt;&lt;/TR&gt;&lt;/TABLE&gt;&lt;/BODY&gt;
</pre>
<p>This appears as:</p>
<div Style="text-indent:&quot;1cm&quot;">
<table CLASS="clsStd">
<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>
</div>
<p>The Item 6, Item 7, Item 10, and Item 11 elements of the table are selected as a block
and copied to the clipboard. The following is an MSHTML interpretation of what will be on
the clipboard. The selection is shown in bold.</p>
<pre CLASS="clsCode">
&lt;!DOCTYPE ...&gt;
&lt;HTML&gt;&lt;BODY&gt;&lt;TABLE BORDER&gt;
&lt;!--StartFragment--&gt;
<b>&lt;TR&gt;&lt;TD&gt;Item 6&lt;/TD&gt;
&lt;TD&gt;Item 7&lt;/TD&gt;&lt;/TR&gt;&lt;TR&gt;&lt;TD&gt;Item
10&lt;/TD&gt; &lt;TD&gt;Item 11&lt;/TD&gt;&lt;/TR&gt;</b>
&lt;!--EndFragment--&gt;
&lt;/TABLE&gt;
&lt;/BODY&gt;&lt;/HTML&gt;
</pre>
<h3>Pasting a Fragment of an Ordered List into Plain Text</h3>
<p>HTML text:</p>
<pre CLASS="clsCode">
&lt;BODY&gt;&lt;OL TYPE = a&gt;&lt;LI&gt;Item 1&lt;LI&gt;Item
2&lt;LI&gt;Item 3&lt;LI&gt;Item 4&lt;LI&gt;Item 5&lt;LI&gt;Item
6&lt;/OL&gt;&lt;/BODY&gt;
</pre>
<p>This appears as:
<ol>
<li Style="text-indent:&quot;1cm&quot;">Item 1 </li>
<li Style="text-indent:&quot;1cm&quot;">Item 2 </li>
<li Style="text-indent:&quot;1cm&quot;">Item 3 </li>
<li Style="text-indent:&quot;1cm&quot;">Item 4 </li>
<li Style="text-indent:&quot;1cm&quot;">Item 5 </li>
<li Style="text-indent:&quot;1cm&quot;">Item 6 </li>
</ol>
<p>The user selects and copies items 3 through 5 to the clipboard. The following HTML is
in the clipboard. The user's selection is shown in bold.</p>
<pre CLASS="clsCode">
&lt;DOCTYPE...&gt;&lt;HTML&gt;&lt;BODY&gt;&lt;OL TYPE = a&gt;
&lt;!-- StartFragment--&gt;
<b>&lt;LI&gt;Item 3&lt;LI&gt;Item 4&lt;LI&gt;Item 5</b>
&lt;!-- EndFragment--&gt;
&lt;/OL&gt;&lt;/BODY&gt;&lt;/HTML&gt;
</pre>
<p>If this fragment is now pasted into an empty document, the following HTML will be
created:</p>
<pre CLASS="clsCode">&nbsp;
&lt;BODY&gt;&lt;OL TYPE = a&gt;&lt;LI&gt;Item 3&lt;LI&gt;Item4&lt;LI&gt;Item 5&lt;/OL&gt;&lt;/BODY&gt;
</pre>
<p>This appears as:
<ul>
<ol>
<li Style="text-indent:&quot;1cm&quot;">Item 3 </li>
<li Style="text-indent:&quot;1cm&quot;">Item 4 </li>
<li Style="text-indent:&quot;1cm&quot;">Item 5 </li>
</ol>
</ul>
<h3>Pasting a Partially Selected Region</h3>
<p>HTML text:</p>
<pre CLASS="clsCode">
&lt;P&gt; MSHTML is a WYSIWYG Editor that supports:&lt;/P&gt;
&lt;UL&gt;&lt;LI&gt;Cut&lt;LI&gt;Copy&lt;LI&gt;Paste&lt;/UL&gt; &lt;P&gt;This is a great tool!&lt;/P&gt;
</pre>
<p>This appears as:</p>
<div Style="text-indent:&quot;1cm&quot;">
<p>MSHTML is a WYSIWYG Editor that supports:
<ul>
<li Style="text-indent:&quot;1cm&quot;">Cut </li>
<li Style="text-indent:&quot;1cm&quot;">Copy </li>
<li Style="text-indent:&quot;1cm&quot;">Paste </li>
</ul>
</div><div Style="text-indent:&quot;1cm&quot;">
<p>This is a great tool!</p>
</div>
<p>The user selects from &quot;WYSIWYG&quot; to &quot;Cop&quot;. The following HTML is in
the clipboard. The user's selection is bold.</p>
<pre CLASS="clsCode">
&lt;DOCTYPE...&gt;&lt;HTML&gt;&lt;BODY&gt;
&lt;!-- StartFragment--&gt;
<b>&lt;P&gt;WYSIWYG Editor that supports:&lt;/P&gt;
&lt;UL&gt;&lt;LI&gt;Cut&lt;LI&gt;Cop&lt;/UL&gt;</b>
&lt;!-- EndFragment--&gt;
&lt;/BODY&gt;&lt;/HTML&gt;
</pre>
<p>The user selects from &quot;opy&quot; to &quot;great&quot;. The following HTML is in
the clipboard. The user's selection is bold.</p>
<pre CLASS="clsCode">
&lt;DOCTYPE...&gt;&lt;HTML&gt;&lt;BODY&gt;
&lt;!-- StartFragment--&gt;
&lt;UL&gt;&lt;LI&gt;
<b>opy&lt;LI&gt;Paste&lt;/UL&gt;&lt;P&gt; This is a great</b>
&lt;/P&gt;
&lt;!-- EndFragment--&gt;
&lt;/BODY&gt;&lt;/HTML&gt;
</pre>
</div><script LANGUAGE="JavaScript"><!--
function CheckToTop()
{
var eBody = document.body;
if (eBody.scrollHeight > eBody.offsetHeight) pBackTop.style.display = 'block';
}
//--></script>
<script LANGUAGE="JavaScript"
SRC="/msdn-online/shared/js/navlinks.js"></script>
<!-- END_PAGE_FOOTER -->
</body>
</html>