HTML Rich-text editing: wrap custom html around selection

Question

I am using html 5 rich text editing via the jWysiwyg library. I want to be able to surround the selected part of the document with custom HTML, much like how one would highlight text on the document and mark it as bold. There is very limited information on the subject, and I'm not even sure if it's possible. I've also tried to get the raw html selection of the page, but so far I've only been able to get a plain-text version of whatever is highlighted on the screen. Any recommendations would be much appreciated.

Answer 1

After further research, I discovered that the getInternalRange() function in jWysiwyg effectively returns the object generated by document.createRange(). After reviewing the documentation, I was able to locate the surroundContents() method, which meets my needs. An example is provided below. I'm using jQuery, so I will also demonstrate how to use jQuery to generate the html element for you:

var range = document.createRange();

range.surroundContents($('<span style="background-color: red;" />').get(0));

This particular example highlights the selected text in red, however this example can be easily generalized to allow a developer to surround the selection with any number of html elements.