Contenteditable，删除删除carret中的char +使用::之前在Chrome中生成的内容

Question

我有一个contenteditable元素，可能包含span内联元素。 这些内联元素可能包含使用伪选择器:: before或:: after和CSS属性内容生成的内容。

当用户尝试删除（删除或退格）放置在内联元素之前或之后的字符时，整个内联将被删除。 如果内联元素内部有文本，则它应该正常工作（仅删除char）。

Chrome和Safari存在问题。

任何人都有解决方案的建议，以防止这种行为，Js和Jquery可以解决这个问题，我不想改变firefox中的行为。

Fiddle

<p contenteditable="true">text
C<span class="pesudo" gentext="pseudo text"></span>
C<span class="default">just text</span>
more text.
</p>

Answer 1

解决这个问题的一种方法是在每个内联元素中插入一个char。我选择了一个零宽度空间的char ​，因此用户不会看到它。