VoodooPad bookmarklets now support HTML
VoodooPad bookmarklets are very useful. But they let you paste only plaintext from your web browser into your document — until now.
VoodooPad Application URLs
VoodooPad understands application-specific URLs of the form voodoopad:description=encoded_text&page=name_of_VoodooPad_document_page
. When you open one of these URLs, VoodooPad inserts the encoded text into the indicated page of the current VP document.
You can open voodoopad: URLs from other applications, such as a web browser. That's what's so cool about VP bookmarklets -- they let you quickly select some text in your web browser and paste it into a VP document, along with other information such as the URL where the text originated.
The only problem is, the description
parameter can contain only plain text. So if you've selected part of a web page that contains hyperlinks, those hyperlinks won't come along for the ride.
New Feature
Gus Mueller, VoodooPad's creator, recently released a new build. It adds a new html
parameter to VoodooPad URLs. Now you can select part of a web page and transfer it as HTML into your VoodooPad document.
Gus summarized the new feature thus:
The format of the bookmarklet is like so: voodoopad:page=junk&html=<b>hello</b>%20world!
Here's expanded code for a JavaScript bookmarklet which takes advantage of the new parameter. It works in both Safari and Firefox 3.0.x:
javascript: function pad(v) { var res=String(v);while(res.length<2) { res='0'+res; } return res; }; var d=new Date(); var page=(String(d.getFullYear())+'-'+ pad(d.getMonth()+1)+'-'+ pad(d.getDate())); function selHTML() { var wr=document.createElement('div'); var c=window.getSelection().getRangeAt(0).cloneContents(); wr.appendChild(c); return wr.innerHTML; }; location.href='voodoopad:html='+encodeURIComponent('<div style="font:12px helvetica">'+location.href+'<br/>"""<br/>'+selHTML()+'<br/>"""</div><br/>')+'&page='+page;
Worth noting: in this snippet the html content is wrapped up in a div which has an explicit font specification. The bookmarklet is transferring a chunk of HTML, but that chunk doesn't include any of the CSS from the original web page. So if you don't specify a style for the wrapper div, VoodooPad will use its own default style for the current VP page. (I think that's something like Times Roman 10px.)