My latest project to go into production is a retail targeted newsletter site designed to deliver content both on the site itself and, naturally, through a newsletter to the subscribed members. As a little background, the site has a custom-built CMS managing 90% of all of the content, including every issue of the newsletter and all of the contained articles. One of the obstacles that I needed to overcome was a way to easy way to get the dynamic content from the database into a seperate mass email application fo delivery. This sounded pretty simple, so I saved it until last.
After a bit of searching, I found information about Firefox and Opera having security measures preventing this from working right out of the gate. Okay, but I know sites like Google, Amazon, and countless others have pulled this off – so I know it's possible. My criteria was pretty simple:
copy the source code of a <div> that wrapped the essential content to the clipboard by clicking a button.
That's it; nothing too fancy. The next thing I found was an example of pulling text from a textfield on Jeffothy's Keyings blog. I didn't have content in a textbox though, it was in a <div> – so I altered the code to pull the data using innerHTML.
document.getElementById('sourceDiv').innerHTML;
That resulted in undefined being copied to the clipboard (I'm still not sure why). So back to Google to find some .net examples, but they turned out to be far more complex than what I wanted to use. I knew I could do it with JavaScript though; so I went back the first example. First, I simply set up a function to grab the code and fire an alert.
<script language="javascript">
function getSource() {
var sourceData= document.getElementById('sourceDiv').innerHTML;
alert(sourceData);}
</script>
This worked fine. So the next part was to get it to the clipboard, but I kept running into not being able to pass it to the clipboard function I downloaded from Jeffothy's site – so I added a textarea, and set style display:none. Then copied the code out of the textarea onto the clipboard and viola!
But not quite. IE doesn't like the textarea set to not visible and wouldn't recognize it being there at all (throwing a JavaScript error), so I had to change the style to width:1px and height:1px to get it work cross browsers.
<script type="text/javascript">
function copySource(inElement) {
if (inElement.createTextRange) {
var range = inElement.createTextRange();
if (range)
range.execCommand('Copy');
} else {
var flashcopier = 'flashcopier';
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement('div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<embed src="/media/_clipboard.swf" FlashVars="clipboard='+escape(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashcopier).innerHTML = divinfo;
}
}function getSource() {
var sourceData = document.getElementById('sourceDiv').innerHTML;
document.getElementById("sourceField").value = sourceData;
copySource(document.getElementById("sourceField"));
}
</script>
Now the interesting part about this is the swf file. It is the key to getting this whole deal to work. By using the _clipboard.swf file (originally built by Mark O’Sullivan of http://lussumo.com/), you are able to get the copied code out of the browser and onto the clipboard by passing it to Flash's System class using the setClipboard method. Pretty ingenious really.
All you have to do now is just drop a form in the page around everything you want to copy, and a button and textarea.
<center>
<input type="button" value=":: Copy to the clipboard ::" onclick="getSource()" />
</center>
<br />
<textarea name="sourceField" id="sourceField" cols="85" rows="10" readonly="readonly" style="width:1px;height:1px;"></textarea>
I wrapped it all up in a zip file for those who want to download it.