I'm using rangy and have a case with a contenteditable div where the users selection can be saved and later restored so that HTML can be inserted.
My problem is that if the user selects within a
header element, I don't want the html inserted within a
header.
So I'm trying to figure out how to use rangy so that if the the selection is made within a
header then I can move it before the
header element.
So if the user selects within an h1:
<div id="editable" contenteditable>
<h1>|user selects here|
Header Text</h1>
</div>
Then the saved selection would be moved before the h1:
| selection boundary moved here |<div id="editable" contenteditable>
<h1>|user selects here|
Header Text</h1>
</div>
I've tried the following to see if I could move the selection boundary:
var sel = rangy.getSelection();
var range = sel.getRangeAt(0);
range.setStartBefore(sel.anchorNode.parentNode);
sel.removeAllRanges();
sel.addRange(range);
selected = rangy.saveSelection();
But when I select within the H1, it still sets the saved selection boundaries within the H1 and not before it. I'm not sure how I can get the boundaries moved before the
header element.
