Click here to Skip to main content
Click here to Skip to main content

Copy as HTML to clipboard from Internet Explorer

, 22 May 2004
Rate this:
Please Sign up or sign in to vote.
A simple workaround to copy HTML source of selected text to clipboard from context-menu in Internet Explorer.

Right-click on selected text and select Copy as HTML from the menu

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

History

Version 1.0 - First release.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Bee Master
Web Developer
Singapore Singapore
No Biography provided

Comments and Discussions

 
GeneralIE8 Pinmemberlarsgs10-Feb-10 1:01 
GeneralRe: IE8 Pinmembernetpacer20-Jun-10 2:18 
QuestionHow to navigate to some other site using context menu? Pinmembervikrant kpr21-Oct-07 8:20 
Questionsaving the HTML source code PinmemberSami Ullah Kashif18-Jan-07 6:23 
AnswerRe: saving the HTML source code Pinmemberzhifu26-Feb-09 21:10 
GeneralRe: saving the HTML source code PinmemberSami Ullah Kashif26-Feb-09 21:17 
Generalwow Pinmemberkamal k s chauhan15-Oct-06 20:29 
QuestionAin't there a chance to do same with mozilla? Pinmembersevenverse14-Feb-06 22:39 
QuestionCan I do the same with Images? PinsussRalphV7-Jan-05 23:50 
QuestionCan I do This By C#? PinmemberStoney Tian1-Aug-04 21:32 
AnswerRe: Can I do This By C#? PinmemberBee Master2-Aug-04 6:21 
GeneralRe: Can I do this in C# Library PinmemberSudhakar J10-Apr-05 21:58 
GeneralRe: Can I do this in C# Library PinmemberBee Master11-Apr-05 15:16 
GeneralCan I do this in C# Library PinmemberSudhakar J11-Apr-05 18:33 
GeneralRe: one more help PinmemberSudhakar J13-Apr-05 5:16 
GeneralRe: one more help PinmemberBee Master19-May-05 23:27 
GeneralRe: Can I do this in C# Library PinmemberBee Master19-May-05 23:26 
Generalso cool! Pinmemberchoiceplus11-Jul-04 5:15 
GeneralRe: so cool! PinmemberBee Master11-Jul-04 5:32 
Generalhtml clipboard format PinmemberNo Brayn R26-May-04 22:55 
Generalvery nice! Pinmemberklorin23-May-04 13:50 
GeneralRe: very nice! PinmemberBee Master23-May-04 19:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 23 May 2004
Article Copyright 2004 by Bee Master
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid