I’m not really on top of my time management yet, but this was hard enough to find that I think it warrants a blog post anyway…
First, you’ll probably end up visiting the QuirksMode Range Intro to learn about window.getSelection() in browsers like Gecko/Firefox and the equivalent Internet Explorer scripting, but all you’ll learn there is how to get the selection as plain text… and that’s no secret.
Once you’ve got the selection/range, things become a little trickier because, once again, Internet Explorer and everyone else do things differently. In Internet Explorer, it’s as simple as
range.htmlText but in other browsers, it’s a little less obvious.
First, you call
range.cloneContents() to get a DocumentFragment object. This is more or less equivalent to Copy (Ctrl+C) when copying and pasting things. Then you create a <div> element, use
div.appendChild(clonedSelection), and then grab the HTML as text from
div.innerHTML. Don’t go looking for ways to serialize DOM nodes to XML. It’s non-portable and a bit of a red herring.
Here’s my solution, descended from the complete code fragment I eventually found on a thread on the FCKEditor forums:
Now that you know, why not create some interesting bookmarklets?