如何使用嵌套的span和div處理可編輯div中的退格和刪除？

Question

我有一個可編輯的div ，其中可能包含純文本，但也包含另一個標簽。 它可能包含div和br （Chrome在用戶鍵入文本並按ENTER鍵時由Chrome添加），並且還可能包含一些contentcontentable = 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-然后，將光標放在之間，如果您按下Delete鍵，瀏覽器也會刪除范圍（帶有“ He”）：

這是一個“電子包裹站點”，因此可以在Chrome或Chromium中運行。 我想當按下Delete和Backspace時我將不得不干預，但是我真的很努力地構建它。

有人遇到同樣的問題嗎？

Answer 1

為了解決此問題，我在這里應用了其他開發人員使用的策略：在按ENTER鍵時避免創建DIV，而是僅使用BR。 使用了這篇文章中的解決方案