У меня есть редактируемый div , который может содержать простой текст, но также и другие теги. Он может содержать div и br (добавляются Chrome, когда пользователь вводит текст и нажимает клавишу ENTER), а также может содержать некоторые элементы span с contenteditable = false (поскольку они обновляются динамически из внешних событий.
Как это:
![enter image description here](https://i.stack.imgur.com/TOa3x.png)
<div contenteditable="true" spellcheck="true">
aaaaaaaa<span style="background-color:#cecece;font-weight: bold;" contenteditable="false">He</span>
said something.
</div>
Две проблемы:
1 - Если пользователь нажмет Enter между «aaaaaaaa» и «He», у нас будет, с точки зрения пользователя, два переноса строки:
![enter image description here](https://i.stack.imgur.com/U4gqX.png)
2 - Затем, с помощью курсора в строке между, если вы затем нажмете «Удалить», браузер также удалит диапазон (с «Он»):
![enter image description here](https://i.stack.imgur.com/mo6nI.png)
Это «электронно-завернутый сайт», поэтому он работает в Chrome или, если быть точным, в Chromium. Полагаю, мне бы пришлось вмешиваться при нажатии Delete и Backspace, но я действительно изо всех сил пытаюсь их создать.
Кто-нибудь сталкивался с такой же проблемой?