在CONTENTEDITABLE元素，将光标移动HTML标签之间

http://jsfiddle.net/Y7tgx/2/在CONTENTEDITABLE元素，将光标移动HTML标签之间

火狐处理比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>

来源

2012-09-22 Jordan

如果jsFiddle链接有一天停止工作，那么在问题中加入相关的代码会很有帮助 –

您想要的行为是反制，直观的，典型的用户期望方向键通过他们看到的角色导航脱字符，而不考虑造型。右箭头键应该移动插入符号在下面两种情况下都是2 t用管道字符表示）：“1 | 2“和”1 |“ ** 2 **“ –

我的界面使用CSS显示标签的可视化表示：before和after之后，它更直观地让光标在标签之上停下来，它不是一个所见即所得编辑器;它是一个视觉增强的语义编辑器标记，用户需要任意控制光标指向哪个元素 – Jordan

修改代码，以确保字符不会跳过将是一个合理的修正，但能够邻近标签或编辑标签之间进行导航都会反对的浏览器是如何处理的标记（治疗无形的标签，文本内容）。标签的可视化表示应该以文本内容的形式完成，而且任何更加神奇的解决方案都很可能不得不依赖于某种程度上的内容（因此完全可以做得更清楚）。一个相当简单的方法是使用<span class="tag"><b></span>之类的东西，然后添加附加到*[contenteditable='true'] span.tag的JavaScript来控制光标作为单个单元在该跨度上移动。

使用服务器端代码可能最好使用服务器端代码进行转换，否则在JavaScript中使用基本自检将允许替换或补充代码（替换会使编辑变得更容易，但只需添加其他跨度如果元素结构是固定的，并且只有文本内容正在被编辑，那么它的侵入性会小一些

来源

2012-10-06 13:40:59

在CONTENTEDITABLE元素，将光标移动HTML标签之间

回答

相关问题