Get node/element before and after caret position in contenteditable div

Question

I have a contenteditable div in my GWT application and when I press backspace or delete key, I want to get the node before and after caret position and check whether it is a text node or not.

Element element = DOM.createDiv(); 
element.setAttribute(contenteditable, "true");
basePanel.getElement().appendChild(element);

This is how I created the content editable div.

Any solutions will be appreciative.

Regards.

Answer 1

Dig into selection and range classes. They are not yet browser compatible, so you might use

https://code.google.com/p/rangy/ or
jquery++

for abstraction. You then create a range for your div, expand it by 1 on both ends. then you examine startcontainer and endcontainer to find out their node type.

The selection and range apis are not overly beautiful and working with them is more involved than necessary, but that is the way to get it done.