How to set caret/cursor position in a contenteditable div between two divs.

Question

Consider the following contenteditable div.

bold text
bold text
         


        
      

Answer 1

My answer will be just an addition to Tim's one, which is comprehensive.

AFAIK Facebook doesn't use content editable. Status box is made of a simple textarea and div layer underneath it on which they render blue rects for nicks.

Although, even if they did, that would be a different case, because nick would be an inline element and luckily with inline elements situation is simpler :).

Regarding positioning caret at inaccessible places - at CKEditor we had the same problem. There are many places where user can't move caret. We decided to solve this issue with a plugin called Magic-line. As you can see in the demo we bypassed the problem with selection completely and I think that this is the best way to solve this issue. It's very usable and in CKEditor 4.0.1 it will be (and already is on master) also fully accessible by keystrokes.