Contenteditable div: сохранить и восстановить позицию каретки, когда она помещается в пустую новую строку

Question

Мне нужно сохранить и восстановить позицию каретки, когда пользователь вводит содержимое в контентном div (html написан отредактирован и вставлен с каждой нажатой клавишей) ,

Я прочитал и успешно использовал это решение Tim Down для аналогичного вопроса: https://stackoverflow.com/a/13950376/2086428.

Проблема возникает, когда каретка находится в пустой строке, она будет восстановлена ​​в предыдущей непустой строке (попробуйте ее here, добавьте новую строку и сохраните/восстановите курсор).

В разделе комментариев предлагаемого решения один пользователь имел ту же проблему, автор решения намекнул преобразовать <br> s в символы.

Как это сделать? Есть ли более простые решения?

PS: Я не могу использовать rangy для этого проекта.

Answer 1

Вы можете слушать keydown; каждый раз, когда нажимается клавиша Enter, проверьте, есть ли какой-либо символ в том же (или следующем брате) текстовом узле сразу после позиции каретки (вы получите событие до того, как линия будет нарушена). Если не добавить   после позиции каретки, а затем сохранить позицию.

Некоторые из этих утилит могут быть полезны:

https://github.com/MailOnline/milo/blob/master/lib/util/dom.js https://github.com/MailOnline/milo/blob/master/lib/util/selection/index.js

Answer 2

От this answer:

Решение, чтобы убедиться, что каждый тег «уш» следует символ новой строки (\ п).

Это не повредит HTML-контенту каким-либо видимым образом, но теперь все разрывы HTML преобразуются в разрывы текстовых строк, как только вызывается range.toString().

<br>\n 

Рабочий пример здесь: http://jsfiddle.net/gEhjZ/95/

Для сравнения, например, который имеет проблему (без \ п после «ш»): http://jsfiddle.net/gEhjZ/94/