3

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.

Suresh Atta
  • 120,458
  • 37
  • 198
  • 307
Nitish Borade
  • 367
  • 3
  • 18
  • can you plese post some code. – Suresh Atta Mar 23 '13 at 06:50
  • I am looking for the code to get the node before/after the the current Caret position. It probably would be some javascript which I could use in a JSNI method. – Nitish Borade Mar 23 '13 at 07:02
  • Element element = DOM.createDiv(); element.setAttribute(contenteditable, "true"); basePanel.getElement().appendChild(element); This is how I created the content editable div. – Nitish Borade Mar 23 '13 at 08:47
  • [this](http://stackoverflow.com/q/2844649/547020) [might](http://stackoverflow.com/q/3972014/547020) [be](http://stackoverflow.com/q/10414654/547020) [a](http://stackoverflow.com/q/10829047/547020) [duplicate](http://stackoverflow.com/q/11015313/547020). – Eliran Malka Mar 23 '13 at 18:08
  • same topic but would not say duplicate. – citykid Mar 30 '13 at 16:09

1 Answers1

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.

citykid
  • 9,916
  • 10
  • 55
  • 91