Javascript: How to simulate cursor with arrow key control for positioning DOM edits?

I'm building an in-browser IDE using Javascript. The code/widgets are stored in the document. I want control over the editing 开发者_如何学Goprocess so I am intercepting keystrokes and displaying a simulated cursor where the edit point is in the DOM. (At first I tried using contenteditable = true but that isn't giving me enough control.)

I've made some progress so that clicking will insert the cursor at the beginning of the div and the right arrow will move to the next node, although now I am realizing that I am going to have to dig into the contents() and keep track of my cursor position in text nodes..

I'm wondering if anyone knows of any code out there that I can refer to or just copy or something rather than re-inventing the wheel. I am using jQuery but that isn't a requirement.

Perhaps Mozilla Bespin can help. But IMHO if you can't use contenteditable you'll need to write a lot of code.