2016-03-30 3 views
1

Я работаю над созданием аннотаций в тексте HTML с использованием JavaScript. Как он работает, пользователь нажимает на contenteditable <div>, и я получаю позицию курсора на основе того, где они нажимают. Затем, когда я помещаю аннотацию в текст, я перехожу к этой позиции символа, чтобы вставить индикатор сноски. Проблема в том, что позиция курсора в contenteditable <div> не учитывает HTML-теги. Так, например, если <div> содержала следующее:Contenteditable get position, включая HTML

AB<b>CD</b>EF 

И я поместил курсор между «C» и «D», позиция 3, потому что она игнорирует <b>. Есть ли способ получить позицию курсора, включая теги HTML, чтобы она была последовательной, когда я возвращаюсь и помещаю свои маркеры? <div> необязательно должен быть contenteditable, если это открывает другие решения.

(я в настоящее время с помощью этого решения, чтобы получить позицию: Get a range's start and end offset's relative to its parent container)

+0

Вам не нужно знать значение, которое вы указали, чтобы вставить узел HTML в местоположение курсора. 'window.getSelection(). getRangeAt (0) .insertNode ()' будет делать трюк. – nekavally

+0

Проблема в том, что я не вставляю ее непосредственно в узел. Мне нужно сохранить местоположение и вставить его позднее – Zak

ответ

0

Я думаю, это потому, что <b> нет контейнера и <div> является контейнером. Я не пробовал код, но постараюсь присвоить «display: inline-block» <b>, чтобы он распознавался как контейнер. Возможно, это работает.

+0

Проблема заключается в том, что выбор игнорирует разметку HTML, которая не отображается в браузере. Он начинается с правильного контейнера, он просто перескакивает через теги html при подсчете позиции. – Zak