Copy as HTML to clipboard from Internet Explorer

• Download source files - 1.13 Kb

Introduction

This simple workaround provides an additional context-menu option, Copy as HTML, in the Internet Explorer, to copy the selected range of text along with HTML source to the clipboard.

For e.g., in the above case, Copy will place the following in the clipboard:

Welcome to The Code Project.
Your place for 6,636 free C++, C# and .NET articles, code snippets, discussions, 
news and the best bunch of developers on the net.

While, Copy as HTML will place the following in the clipboard:

<DIV style="MARGIN-TOP: 7px; FONT-SIZE: 13pt; COLOR: #ff9900">
<B>Welcome to The Code Project.</B></DIV>
<DIV>Your place for <A href="/script/articles/sections.asp"><B>6,636</B></A> 
free C++, C# and .NET articles, code snippets, discussions, 
news and the best bunch of developers on the net.
</DIV>

Background

The HTML editor of Microsoft Visual Studio has a feature by which when you copy text to the Clipboard from Internet Explorer, two versions of the text become available: an HTML version and a text version. The HTML version uses HTML escape sequences for reserved characters such as <, >, and quotation marks.

For example, if you copied "<MARQUEE>" to the Clipboard:

• the HTML version would be "&lt;MARQUEE&gt;".
• and the text version would be "<MARQUEE>".

When you paste, you can choose either of the following options from the right-click menu:

• To paste the HTML version, choose Paste.
• To paste the text version, choose Paste as HTML.

This is a great feature even though it is a bit confusing as I always thought Paste should paste text version and Paste as HTML should paste text along with HTML tags. Anyways, it would be nice if this feature is available in Internet Explorer itself in the form of "Copy as HTML" option. This way, HTML can be directly pasted in any text editor and even source files in Microsoft Visual Studio instead of just HTML editor.

But sadly, this is not the case. Currently, to copy the HTML source, one has to view the source of a web page and search for the required text content, and then select and copy the HTML source to the clipboard.

The Solution

The solution is a simple three lines of code.

     // Get the selected Html source of the window object

     // where the context menu item was executed

     var selectedHtml=(document.selection.createRange()).htmlText;
     // Set the clipboard with selected HTML, if there is any

     if(selectedHtml!= "")
         window.clipboardData.setData("Text",selectedHtml);

The first line retrieves the HTML source of the TextRange object from the current text selection. There is a catch here though. The htmlText property will retrieve the HTML as a valid HTML fragment. This means that it will close all the tags on its own for unclosed HTML tags within the selected range. But this is good as we don't have to worry about closing all the open tags.

The next two lines assign the selected HTML, if any, to the clipboardData object in text format.

These three lines of code can be included in any web application to provide an option of copying text to the client clipboard. But I wanted this feature to be available in the context menu of my browser. This is where an article by aalo, here on CodeProject, helped me greatly to know how to place items to the existing context menus of the WebBrowser Control, by placing entries in the registry and linking these to URLs that execute script.

The following registry entry adds an item to the standard WebBrowser Control's context menu with the title "Copy as HTML":

HKEY_CURRENT_USER
        Software
            Microsoft
                Internet Explorer
                    MenuExt
                        Copy as &HTML = "file://C:\\CopyAsHtml.js"

The above key indicates that upon selecting the menu option, it will execute the inline script contained in the file CopyAsHtml.js placed in root of C drive. The ampersand (&), just before HTML in the key name, will cause "H" to be underlined.

The inline script file uses external.menuArguments to reference the window object where the context menu item was executed. So, the above three lines of code will change as follows in CopyAsHtml.js file:

    // Get the selected Html source of the window object

    // where the context menu item was executed

    var selectedHtml=
      (external.menuArguments.document.selection.createRange()).htmlText;
   
    // Set the clipboard with selected HTML

    if(selectedHtml!= "")
        external.menuArguments.clipboardData.setData("Text",selectedHtml);

Installation

Installation steps:

• Download the zip file.
• Close all browser windows.
• Copy CopyAsHtml.js file to the root of C drive.
• Double-click on CopyAsHtml.reg. This will make a "Copy as HTML" entry in registry to create a menu item under context menu.

Note: If you choose to copy CopyAsHtml.js file to any folder other than root of C drive, then change the following line in CopyAsHtml.reg to point to the corresponding folder before running the CopyAsHtml.reg file.

@="file://C:\\CopyAsHtml.js"

Uninstall

Uninstall steps:

• Close all browser windows.
• Open Registry Editor by clicking Start, click Run, type regedit, and then click OK.
• Close all browser windows.
• Go to following registry key:

  HKEY_CURRENT_USER --> Software -->
      Microsoft --> Internet Explorer --> MenuExt

• Delete "Copy as &HTML" key.

Known Issues

A few known issues:

• As the title suggests, it works only in Internet Explorer.
• Some special HTML codes are not escaped when copied to clipboard. For e.g., � is not escaped as &copy;
• As mentioned earlier, the clipboard data is stored as a valid HTML fragment.

Summary

This simple workaround makes life easier to quickly copy certain section of a web page along with all the formatting. Any suggestions, questions, or comments are welcomed.

References

• MSDN: Cut and Paste in Design View.
• MSDN: HTML and Dynamic HTML.
• MSDN: Adding to the Standard Context Menus.
• CodeProject: Bored by Hotmail by aalo.

History

Version 1.0 - First release.