Copy To Clipboard in HTML

or Speed blogging Exposed…
or “Copy as Text Link” and “Copy as Image Link” Blogging Tools explained.

Usually when I post something technical, I include a detailed rambling explaniation of how it does what it does. In the post “Copy as Text Link” and “Copy as Image Link” Blogging Tools” I created a batch file that did some neat stuff. But I didn’t give a full explaination of the details. Now I will.

The batch file did the following neat stuff…
1. Used Environmental variables to create HTML files in a standard Windows directory
2. Dynamically add string and DWord registry entries
3. Demonstrated adding menu items to Maxthon & Internet Explorer (Unfortunatly these do not show up in FF or Opera.)
4. Displayed different contexts based upon what was selected.
5. Launched another IE window that does not effect the output but does process information selected in the first.
6. Demonstrated how to copy HTML source to the paste buffer via HTML and javascript.:
7. Copied text to the clipboard, formatting it into HTML

Not bad for a small batch file.

So, here’s how the magic was done…

First, the easy stuff. The batch file creates two text files. That is done using the redirection symbol (aka the output to file symbol) which is > (aka the Greater Than sign). The Greater than sign appends the displayed results directly to a file. Two greater thans in a row cause the file to be recreated. I use the Echo command to echo (go figure) text to two HTML files I will be creating. Since I use >> in the first line, those files will always be recreated if the batch file is run again.

Because HTML also uses GT and LT symbols, they must be denoted as literal symbols. That is done with the carot symbol ^. Thusly
[dos]
echo ^>%windir%\web\copytextaslink.htm
echo ^

[/js]

As you can see, the bulk of the file is JavaScript. The second line clearly declares it so. However, instead of putting Language=”JavaScript” (which is the old school way of doing things and how I learned originally), I should have specified it as a MIME type like this Type=”text/javascript” The end result is the same, however eventually the old language option will be dropped.

Another option that you might not be familiar with is the defer flag. This is a browser load time optimizer. It tells the browser that the contents of the script will not effect the layout of the page and therefore the browser can continue drawing the page.

The process is also pretty easy to follow because it uses Microsoft’s DOM technology. DOM is the Document Object Module and allows IE to handle all web pages as if it were Object Oriented. You can reference the document and the various parts/divisions of any web page. And that allows you to directly access properties or methods of these objects.

So what the code above does is asks for the document in the parent window (the one in which you right clicked). It then asks for the current selection (if any). It then gets the current selection as text and then asks for the clibboard object for the current window. At that point it is a simple call to SetData and the selected text is added (with a few additions) to the clippboard. There isn’t much more than that. One thing that should be noted is that the type of data in the clibboard must be specified, in this case, as text. You can read more about the other types of data that a clib board can handle in my article about Clipboard manipulation with Delphi HERE:

The second file proceeds much the same way except that it goes further into the DOM and retreives the Height and Width of the original image so that the pasting of the tag in your blog can include that information (most specifically, the aspect ratio.

[js]

[/js]

That’s it for the HTML. The only thing left is to create a couple of triggers to activate those two files. That’s done through the registry.

Internet explorer reads through the registry each time it pops up a menu. It first decides what is clicked and then looks at the registry entries under HKey_CurrentUser\Software\Microsoft\Internet Explorer\MenuExt\ all of the menu items that match the type of selection. MSDN has a full article that explains this in detail HERE, however, the following table is probably all you’ll need:

So, the last step of the process is to route the text to the text processing HTML and the img tag source to the image text file.

That’s done in these two lines…
[dos]
reg ADD “HKCU\Software\Microsoft\Internet Explorer\MenuExt\Copy Image as Lin&k” /ve /t REG_SZ /d “%WINDIR%\web\copyimageaslink.htm” /f
reg ADD “HKCU\Software\Microsoft\Internet Explorer\MenuExt\Copy Image as Lin&k” /v Contexts /t REG_DWORD /d 2 /f
.
[/dos]

That’s it! You’ve got your full walk through! Any questions?