5

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

Firefox 比 Chrome 处理得更好，但都不是我想要的方式。它们都将所有相邻的 HTML 标记集中在一起，并将它们视为一个（我不想要）。

Firefox：当光标在一个标签（或一组相邻标签）的左侧并且您按右时，光标会跳过标签前面的第一个字符。然后，如果你按左键，它会在字符和标签之间移动。（按左然后右相同。）

Chrome：标签和它后面的第一个字符集中在一起。无法将光标放在标签和后面的字符之间。

期望：标签被视为相对于光标的单个字符。如果光标在标签的左侧并且您按右，它应该转到标签的右侧，反之亦然按左。

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

这不适用于所见即所得的编辑器。为了达到特定目的，标签在生产中以视觉方式表示，就像它们在 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>
4

1 回答 1

1

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

与/从的转换可能最好使用服务器端代码完成，但否则在 JavaScript 中使用基本自省将允许所需的代码替换或补充（替换将使编辑更容易，但简单地添加额外的跨度将不那么具有侵入性如果元素结构是固定的并且只编辑文本内容。

于 2012-10-06T13:40:59.613 回答