Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET
Article

Copy as HTML to clipboard from Internet Explorer

Rate me:
Please Sign up or sign in to vote.
4.70/5 (22 votes)
22 May 20044 min read 189.5K   1.8K   43   22
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:

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

JavaScript
// 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:

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


Written By
Web Developer
Singapore Singapore
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralIE8 Pin
larsgs10-Feb-10 1:01
larsgs10-Feb-10 1:01 
GeneralRe: IE8 Pin
netpacer20-Jun-10 2:18
netpacer20-Jun-10 2:18 
QuestionHow to navigate to some other site using context menu? Pin
vikrant kpr21-Oct-07 8:20
vikrant kpr21-Oct-07 8:20 
Questionsaving the HTML source code Pin
Sami Ullah Kashif18-Jan-07 6:23
Sami Ullah Kashif18-Jan-07 6:23 
AnswerRe: saving the HTML source code Pin
zhifu26-Feb-09 21:10
zhifu26-Feb-09 21:10 
GeneralRe: saving the HTML source code Pin
Sami Ullah Kashif26-Feb-09 21:17
Sami Ullah Kashif26-Feb-09 21:17 
Generalwow Pin
kamal k s chauhan15-Oct-06 20:29
kamal k s chauhan15-Oct-06 20:29 
QuestionAin't there a chance to do same with mozilla? Pin
sevenverse14-Feb-06 22:39
sevenverse14-Feb-06 22:39 
QuestionCan I do the same with Images? Pin
ralphv7-Jan-05 23:50
ralphv7-Jan-05 23:50 
QuestionCan I do This By C#? Pin
Stoney Tian1-Aug-04 21:32
Stoney Tian1-Aug-04 21:32 
AnswerRe: Can I do This By C#? Pin
Bee Master2-Aug-04 6:21
Bee Master2-Aug-04 6:21 
GeneralRe: Can I do this in C# Library Pin
Sudhakar J10-Apr-05 21:58
Sudhakar J10-Apr-05 21:58 
GeneralRe: Can I do this in C# Library Pin
Bee Master11-Apr-05 15:16
Bee Master11-Apr-05 15:16 
GeneralCan I do this in C# Library Pin
Sudhakar J11-Apr-05 18:33
Sudhakar J11-Apr-05 18:33 
GeneralRe: one more help Pin
Sudhakar J13-Apr-05 5:16
Sudhakar J13-Apr-05 5:16 
Hi

I added one more line the script file , it is not giving any impact ,

var UrlString=window.location.host;
var UrlString=window.location.hosthref;
var UrlString=window.location.hostname;

all the above returns only null , i am trying to capture the host

Thanks
Sudhakar J

sudhakar j
GeneralRe: one more help Pin
Bee Master19-May-05 23:27
Bee Master19-May-05 23:27 
GeneralRe: Can I do this in C# Library Pin
Bee Master19-May-05 23:26
Bee Master19-May-05 23:26 
Generalso cool! Pin
Michael Chao11-Jul-04 5:15
Michael Chao11-Jul-04 5:15 
GeneralRe: so cool! Pin
Bee Master11-Jul-04 5:32
Bee Master11-Jul-04 5:32 
Generalhtml clipboard format Pin
No Brayn R26-May-04 22:55
No Brayn R26-May-04 22:55 
Generalvery nice! Pin
klorin23-May-04 13:50
klorin23-May-04 13:50 
GeneralRe: very nice! Pin
Bee Master23-May-04 19:06
Bee Master23-May-04 19:06 

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

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