Javascript 在contenteditable元素中，在HTML标记之间移动光标

Firefox比Chrome处理得更好，但两者都不是我想要的方式。它们都将所有相邻的HTML标记组合在一起，并将它们视为一个（我不希望这样）

Firefox：当光标位于一个标签（或一组相邻标签）的左侧时，按right键，光标将跳过标签前面的第一个字符。然后，如果按左键，它将在字符和标记之间移动。（先左后右按时相同。）

Chrome：标记和它后面的第一个字符集中在一起。不可能将光标放在标记和以下字符之间

所需：标记被视为相对于光标的单个字符。如果光标位于标记的左侧，而您按right键，则光标应位于标记的右侧，反之亦然，则按left键

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

这不是为WYSIWIG编辑器设计的。为了达到特定的目的，标签在产品中以可视化的方式表示，就像在JSFIDLE中一样。用户希望对包含光标的元素进行任意控制

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>

b:before，b:after，
i:之前，i:之后，
p:之前，p:之后{
颜色：蓝色；
}
b:以前{
内容：''；
}
b:之后{
内容：''；
}
p:以前{
内容：“”；
}
p:之后{
内容：“
”；
}
i:以前{
内容：''；
}
i:之后{
内容：''；
}​
----------
正则正则BoldRegular-
尝试将光标移动到蓝色标记的任一侧
试试这个：regularbolditalic

修改代码以确保不跳过字符将是一个合理的解决方案，但能够在相邻标记之间导航或编辑标记将与浏览器处理标记（将不可见标记视为文本内容）的方式相反。为了做到这一点，标签的可视表示应该作为文本内容来完成，任何更神奇的解决方案都很可能在某个时候依赖于此（因此直接使用它会更清晰）。一个相当简单的方法是使用类似

b

的东西，然后添加附加到

*[contenteditable='true']span.tag的JavaScript来控制光标作为单个单元在该span上移动

与服务器端代码的转换可能最好使用服务器端代码，但是在JavaScript中使用基本的内省将允许对代码进行必要的替换或补充（替换将使编辑更加容易，但如果元素结构是固定的，并且只有文本内容正在编辑，那么简单地添加额外的跨距将不会有太大的影响。
如果JSFIDLE链接有一天停止工作，那么将相关代码放在问题中会很有帮助。您想要的行为是违反直觉的。典型的l用户希望箭头键在他们看到的字符中导航插入符号，而不考虑样式。在以下两种情况下，右箭头键应将插入符号移动到2之后（插入符号由管道字符表示）：“1 | 2”和“1 | 2”我的界面使用CSS:before和：after显示标记的视觉表示，因此光标跨过标记时停止更直观。它不是WYSIWYG编辑器；它是语义标记的视觉增强编辑器。用户希望任意控制光标指向哪个元素。哦，我明白了。我认为CSS生成的内容这是一个有趣的问题。