I am able to output the selected text using alert, but have not yet figure out how to surround it with additional markup. I have seen many examples of running execCommand on the selection, but that is not what I'm looking for.
See my working example at jsfiddle
Any ideas? Thanks
If the selected text is all contained within a single text node, you can use the
surroundContents() method of the Range. However, that doesn't work in the general case. The thing to do is surround each text node within the Range in a
<span>. My Rangy library has a module that does this and works cross-browser (IE <= 8 does not natively support DOM Range).
Example code using Rangy: