Как обработать возврат и удалить в редактируемый div с вложенными span и div? - PullRequest
0 голосов
/ 29 июня 2018

У меня есть редактируемый div , который может содержать простой текст, но также и другие теги. Он может содержать div и br (добавляются Chrome, когда пользователь вводит текст и нажимает клавишу ENTER), а также может содержать некоторые элементы span с contenteditable = false (поскольку они обновляются динамически из внешних событий.

Как это:

enter image description here

<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

2 - Затем, с помощью курсора в строке между, если вы затем нажмете «Удалить», браузер также удалит диапазон (с «Он»):

enter image description here

Это «электронно-завернутый сайт», поэтому он работает в Chrome или, если быть точным, в Chromium. Полагаю, мне бы пришлось вмешиваться при нажатии Delete и Backspace, но я действительно изо всех сил пытаюсь их создать.

Кто-нибудь сталкивался с такой же проблемой?

1 Ответ

0 голосов
/ 03 июля 2018

Чтобы решить эту проблему, я применил стратегию, которую использовали здесь другие разработчики: избегайте создания DIV при нажатии ENTER, вместо этого используйте только BR. Использовал решение от этого поста

...