退格时在ContentEditable DIV前面的第一个字符退出包含元素

Question

我在一些文本周围有一个封装的span标记，它都在一个内容可编辑的div中。

Hello <font id="ud_First Name">Bryan</font>

当用户将光标直接放在此span标记内的第一个字母的右侧并按下退格键将其删除，然后在其位置键入另一个字符时，会出现问题。

Hello B<font id="ud_First Name">ryan</font>

虽然它正确地删除它并且在视觉上似乎在正确的位置添加新角色，但是对chrome中的源的检查显示它实际上放置了对我们的用户编辑跟踪造成严重破坏的跨度的新角色OUTSIDE。

我尝试了很多不同的东西但是在任何情况下都无法将光标保持在span标签内。

有趣的是，HIGHLIGHTING第一个字符，然后键入到位（替换）将光标保持在span标记内，它可以按照您的预期工作。

任何想法如何简单地获得所需的行为（希望如此）？

Answer 1

我有同样的问题（至少在chrome中）。 有趣的是，a或a内的相同模式不会产生同样的问题。

我的HTML是

<div ... contentEditable=true>
   <h1>my title <span class="EMBEDDED">embedded content</span> end of title</h1>
</div>

问题是用户（在某些情况下）无法将光标放在“嵌入内容”的e 之前

我现在没有正确的解决方法，但为了确保用户至少看到我在css中使用的问题a

.EMBEDDED {
  background-color: #ffb848;
  display:none;
}
.EMBEDDED:before {
  content:"{{"
}

.EMBEDDED:after {
  content:"}}"
}

如果我找到更好的解决方案，我会回来