javascript - 如何处理具有嵌套跨度和 div 的可编辑 div 中的退格和删除？

Question

我有一个可编辑的div，它可能包含纯文本，也可能包含另一个标签。它可能包含div和br（当用户键入文本并按 ENTER 时由 Chrome 添加），它还可以包含一些带有contenteditable =false 的span元素（因为它们是从外部事件动态更新的。

像这样：

<div contenteditable="true" spellcheck="true">
      aaaaaaaa<span style="background-color:#cecece;font-weight: bold;" contenteditable="false">He</span>
      said something.
</div>

这两个问题是：

1 - 如果用户在“aaaaaaaa”和“He”之间按 Enter，从用户的角度来看，我们将有两个换行符：

2 - 然后，光标在中间的行中，如果你然后点击删除，那么浏览器也会删除跨度（带有“He”）：

这是一个“电子包装站点”，因此在 Chrome 或 Chromium 中运行。我想当按下 Delete 和 Backspace 时我将不得不干预，但我真的很难构建它。

有人遇到同样的问题吗？

标签： javascriptcontenteditable

Answer 1

为了解决这个问题，我已经应用了其他开发人员在这里使用的策略：在按下 ENTER 时避免创建 DIV，而只使用 BR。使用了这篇文章的解决方案