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

Question

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>';
}

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

修改代码以确保不跳过字符将是一个合理的解决方案，但能够在相邻标签之间导航或编辑标签将与浏览器处理标记的方式（将不可见标签视为文本内容）相反。为了做到这一点，标签的视觉表示应该作为文本内容来完成，并且任何更神奇的解决方案很可能必须在某些时候依赖于此（因此直接这样做会更清晰）。一个相当简单的方法是使用类似的东西<span class="tag">&lt;b&gt;</span>，然后添加附加的 JavaScript 来*[contenteditable='true'] span.tag控制光标作为一个单元在该跨度上移动。

转换到/从转换可能最好使用服务器端代码来完成，但否则使用 JavaScript 中的基本内省将允许所需的代码替换或补充（替换将使编辑变得更加容易，但简单地添加额外的跨度将减少侵入性）如果元素结构固定并且仅编辑文本内容。