CaPReT, Javascript clipboard and Internet Explorer

A technical blog post for the Track OER project...

Cloud created by:

Nick Freear
5 September 2012

The big headline from technical testing of CaPReT, was that copy and paste doesn't work as expected in Internet Explorer (versions 6 - 9).

Specifically, in other browsers you can copy from a CaPReT Javascript-enabled page, and simply paste into an online rich-editor (we tested on live Cloudworks, which uses Tiny MCE). This pastes the text with formatting, with the Piwik web-beacon image and attribution/license meta-data from the source page's license RDFa appended.

My apologies in advance for the technical complexities I detail below. I thought it best to record what we've found before we forget!

In Internet Explorer, when you try to do a simple paste it pastes the source HTML markup, escaped - so you see "<a href="...">..</a>..

Obviously this workaround is not elegant, so I've been looking at a better solution. The crux of the issue is the way that CaPReT hooks into the Javascript "copy" event using Niklas von Hertzen's jquery.plugin.clipboard Javascript.

The Internet Explorer branch of this plugin's logic uses clipboardData.setData, which supports copying as "Text" or "URL" (no "HTML" value available). When the user pastes the destination rich-editor handles the clipboard data as text, escaping and revealinfg the markup. The plugin's logic for the other browsers manipulates the W3C Range that is to be copied, then hands over to the browser to actually perform the copy (that is, it doesn't prevent the default action). So, when the clipboard data is pasted it is recognized as rich-text/HTML and works accordingly.

I've been exploring solutions using Tim Cameron Ryan's 2009 ierange Javascript, and re-working von Hertzen's clipboard plugin. So far unfortunately, I've been unsuccessful. ierange.js provides a shim for Internet Explorer, implementing the W3C Range specification (Version 1.0/ 2000) and DOM Selection. Manipulating ranges is a complex business and I haven't yet determined if the bugs are in ierange.js or my re-worked clipboard2 plugin.

I need to check priorities with my colleagues, but I am tempted to abandon the ierange/jquery.clipboard2 based solution for the moment, as it could become a big time-sink.

The work has not been in vain however, as I have a much better understanding of how Javascript interacts with the clipboard, and I've fixed a number of bugs in the fork of von Hertzen's jQuery Clipboard plugin used by CaPReT.

Extra content

Embedded Content