In the content element, move the cursor between the HTML tags

Question

http://jsfiddle.net/Y7tgx/2/

Firefox does this better than Chrome, but not quite the way I want. They combine all adjacent HTML tags together and treat them as one (which I don't want).

Firefox: when the cursor is left from the tag (or a group of neighboring tags), and you click to the right, the cursor jumps past the first character preceding the tag. Then, if you press left, it will move between the character and the tag. (Same thing for clicking left and right.)

Chrome: The tag and the first character following it are merged together. Cannot place cursor between tag and next character.

Required: The tag is processed as one character relative to the cursor. If the cursor is to the left of the tag, and you click to the right, it should go to the right of the tag and vice versa to click on the left.

How can I enter the desired behavior in the browser?

This is not intended for the WYSIWIG editor. To serve a specific purpose, tags are visually displayed in the production process in the same way as in jsfiddle. Users want arbitrary control over which element the cursor contains.

b:before, b:after, i:before, i:after, p:before, p:after { color: blue; } b:before { content: '<b>'; } b:after { content: '</b>'; } p:before { content: '<p>'; } p:after { content: '</p>'; } i:before { content: '<i>'; } i:after { content: '</i>'; }​ ---------- <p contenteditable='true'>regular regular<b>bold</b>regular - try moving the cursor to either side of either blue tag.</p> <p contenteditable='true'>try it in this: regular<b><i>bolditalic</i></b></p> 

Answer 1

Changing the code to make sure that characters are not missing would be a reasonable correction, but the ability to move between adjacent tags or edit tags would be contrary to how browsers handle markup (processing invisible tags as text content). The visual presentation of tags must be executed as textual content in order to do this, and any magic solution will most likely have to be based on this at some point (so it would be better to do it directly). A fairly simple approach is to use something like <span class="tag">&lt;b&gt;</span> , and then add JavaScript that attaches to *[contenteditable='true'] span.tag to control the cursor, moving around this range as a whole.

Converting to / from would probably be best done using server-side code, but otherwise using basic introspection in JavaScript would allow for replacing or complementing the code (replacing will make editing easier, but just adding extra intervals would be less invasive, if the structure of the element is fixed and only text content is edited.