html的混合标记,javascript – 在contenteditable元素中,在HTML标记之间移动光标

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

Firefox比Chrome更好地处理这个问题,但不是我想要的方式.它们将所有相邻的HTML标记混合在一起并将它们视为一个(我不想要).

Firefox：当光标留在标签(或一组相邻标签)上并向右按时,光标会跳过标签前面的第一个字符.然后,如果你按左键,它会在字符和标签之间移动. (按左,然后相同.)

Chrome：标记及其后面的第一个字符被集中在一起.将光标放在标签和后续字符之间是不可能的.

期望：标签被视为相对于光标的单个字符.如果光标位于标签的左侧并且您向右按,则它应该位于标签的右侧,反之亦然,以便向左按.

如何在浏览器上强制执行所需的行为？

这不适用于WYSIWIG编辑器.为了达到特定目的,标签在生产中以可视方式表示,就像它们在jsfiddle中一样.用户希望任意控制哪个元素包含光标.

b:before, b:after,

i:before, i:after,

p:before, p:after {

color: blue;

}

b:before {

content: '';

}

b:after {

content: '';

}

p:before {

content: '

';

}

p:after {

content: '

';

}

i:before {

content: '';

}

i:after {

content: '';

}​

----------

regular regularboldregular -

try moving the cursor to either side of either blue tag.

try it in this: regularbolditalic