Question

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"><b></span>之类的东西，然后添加附加到*[contenteditable='true'] span.tag的JavaScript来控制光标作为单个单位在该跨度上移动。

最好使用服务器端代码进行转换/转换，但是在JavaScript中使用基本内省将允许代码的替换或补充（替换会使编辑变得更容易，但只需添加额外的跨度就可以了如果元素结构是固定的，只有正在编辑的文本内容，则侵入性较小。

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

1 个答案: