如何使用嵌套的span和div处理可编辑div中的退格和删除？

Question

我有一个可编辑的 div ，其中可能包含纯文本，也可能包含其他标签。它可能包含 div 和 br （Chrome浏览器会在用户键入文本并按ENTER键时添加），还可能包含一些 span 元素，其中< strong> contenteditable = false（因为它们是根据外部事件动态更新的。

赞：

<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 -然后，将光标置于之间，如果您按下Delete键，浏览器也会删除范围（带有“ He”）：

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

有人遇到同样的问题吗？

Answer 1

为解决此问题，我应用了此处其他开发人员使用的策略：按下ENTER时避免创建DIV，而仅使用BR。使用了this post

中的解决方案