After spending over 15 hours on this issue (dedication, I know), I found a partial solution that works in FF and Safari, but not in IE. For the moment, this is good enough for me although I might continue working on it in the future. The solution: When inserting HTML at the current caret position, … Read more
This question has been asked today: How can I highlight the text of the DOM Range object? Here’s my answer: The following should do what you want. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again. UPDATE Fixed to work in IE 9. function makeEditableAndHighlight(colour) { sel … Read more
UPDATE I’ve written a simpler version of this that also works in IE < 9: https://stackoverflow.com/a/4812022/96100 Old Answer This is actually a more useful result than a character offset within the text of the whole document: the startOffset property of a DOM Range (which is what window.getSelection().getRangeAt() returns) is an offset relative to its startContainer … Read more
Here’s a function that will get you HTML corresponding to the current selection in all major browsers. It also handles multiple ranges within a selection (currently only implemented in Firefox): function getSelectionHtml() { var html = “”; if (typeof window.getSelection != “undefined”) { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement(“div”); for … Read more