javascript - jQuery start typing between tags -

i making wysiwyg editor, want preventdefault on enter key, , instead, when enter pressed, creates new line, tags <div></div>. each <div> 1 line. don't know how create <div> , have pointer start between each <div> this:

<div>line 1 here</div> // press enter <div>start typing next line here</div> // when press enter, creates div , automatically when start typing in between tags. 

then after press new line again, creates <div> next line... can help? don't need preventdefault, new action taken if enter pressed.

on face of it, shouldn't difficult. however, browser inconsistencies make problematic.

the basic approach is:

1. capture enter keypress , prevent browser default behaviour. easy far.
2. use dom range in browsers or textrange in ie current caret location browser's selection object. fiddly in ie.
3. create new <div> if caret @ end of current <div> or split current <div> if not. not trivial (think of need if, say, caret inside nested inline elements within <div>) still doable.
4. once again using range or textrange, place caret @ start of new <div>. starts go wrong: webkit won't let place caret @ start of text node, , ie has own problems this, details of i've forgotten.

it's hard. @ big editors (tinymce, ckeditor) handle this.