光标在错误的地方，在contenteditable

Question

我有令人满意的div与不可编辑的“岛屿”。一切都运行良好，直到不可编辑的部分是可编辑div中的最后一件事。在这种情况下，光标不是在不可编辑的后面，而是在可编辑div的最后。

看看我从这个question借来的这个例子

这是你可以尝试的小提琴：http://jsfiddle.net/RYsvZ/2/。当你删除末尾的点时，光标会跳开。这种行为与safari和chrome有关。我想这是webkit问题。

这是代码示例：

<div contenteditable="true" class="editor">
Sample template with <span class="mergecode" contenteditable="false">MergeCode1</span>.
</div>

你知道它为什么会发生以及如何解决它吗？

Answer 1

&zwnj;<button contenteditable=false>press</button>&zwnj;

问题是由于插入符号没有空间可以进入，所以如果你将你的contenteditable div包装在零宽度的非连接空间中，它会让插入符号移动到某个地方。

jsfiddle

Answer 2

当contenteditable = false是最后一个孩子时，会发生这种情况

元件。据我所知，这是webkit的错误。您始终确保“contenteditable = false”包含hidden_​​char或零宽度空白：

• HIDDEN_CHAR：“\ ufeff”
• ZERO_WIDTH_WHITESPACE：“”

如果使用tinymce，则可以使用onNodeChange事件或检查delete / backspace何时发生并验证光标附近的所有“contenteditable = false”。