Поведение Caret внутри contenteditable true и рядом с contenteditable false элементами

Question

Я пытаюсь создать текстовое поле , которое прослушивает введенные, вставленные или отбрасываемые URL-адреса и преобразует их в ссылки. Эти ссылки не редактируются и должны рассматриваться как блоки. Delete и backspace должны удалить их. Наконец, было бы неплохо, если бы они отображали полный выбор, когда каретка перемещается по ним.

Проблемы: проведя слишком много времени и попробовав некоторые из предлагаемых решений, найденных здесь в stackoverflow (Tim Down), я все еще не мог заставить его работать правильно. Мне очень сложно постоянно держать каретку в нужном месте, а после вставки ссылки и автоматического преобразования выбор заблокирован и вход не может быть выполнен. Я попытался вставить и сохранить символ нулевой ширины до и после каждой ссылки, но затем возникли другие проблемы с выбором.

Может кто-нибудь, пожалуйста, взгляните на следующую скрипку, которая представляет собой упрощенную версию, фокусирующую проблему, и направьте меня в правильном направлении для правильной навигации по клавиатуре через эти нередактируемые ссылки внутри контента, содержащего контент?

jsFiddle here

$("#customtextarea").on("input propertychange drop paste", function (e) { 
    var $this = $(this), savedSelection = saveSelection($this.get(0)); 
    var parsedHtml = getParsedHtml($this.html()); // This gets the innerhtml with the urls turned to links 
    $this.html(parsedHtml).focus(); 
    restoreSelection($this.get(0), savedSelection); 
}); 

---

EDIT: Я принял подход, предложенный XuoriG и я до сих пор сталкиваются с более или менее те же вопросы, как и раньше: каретка получает «застряли» после того, как ссылка и ссылки не могут быть удалены. Также навигация клавиатуры (влево, вправо) не работает.

New jsFiddle here

Answer 1

При использовании $this.html вы заменяете весь DOM и потерять свой выбор.

Способ, которым я был в состоянии сделать это, создавая и удаляя узлы DOM на лету на каждой клавише вверх. Я не могу опубликовать код для вас прямо сейчас, но в основном вы просматриваете каждый узел на клавиатуре и создаете новый тег привязки с содержимым, соответствующим вашему регулярному выражению URL-адреса, и удаляете его из текстового узла. Повторяйте, пока у вас не будет больше совпадений в узле. Вы сможете сохранить и восстановить выбор таким образом.

Жесткая часть после того, как можно добавить к существующему URL. То, как я это сделал, - это определить, находится ли текстовый узел рядом с тегом привязки, и если anchor text + the text node соответствует URL-адресу, вы также добавляете текстовый узел к тегу привязки и удаляете текстовый узел.