Подсчитать положение курсора с тегами, включенными в диапазон - PullRequest
Новая
       9

Подсчитать положение курсора с тегами, включенными в диапазон

0 голосов
/ 16 сентября 2018

Я пытаюсь найти положение курсора в contentEditable div, в котором есть HTML-теги.

Примером div будет: 

<div id='editor'>
   <h2>some</h2> text <span>goes here</span>
</div>

Так что есликурсор находится на букве "T" в слове "текст", я хочу получить позицию, которая включает в себя: 

"<h2>some</h2> t"

не просто 

"some "

Я нашел решение, которое не считает тегив позиции: Получить начальное и конечное смещение диапазона относительно его родительского контейнера

Это работает нормально, но мне нужно также подсчитать теги в конечном диапазоне.

1 Ответ

0 голосов
/ 16 сентября 2018

Объект Range дает диапазон, указывающий элементы DOM, выбранные в данный момент, он дает вам информацию относительно того, в каком элементе, с какой позиции начался выбор и в каком элементе, с какой позиции выбор закончился. 

function replaceSelectionWith(value) {
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    const {
        startContainer,
        startOffset,
        endContainer,
        endOffset
    } = range;

    if(startContainer === endContainer) {
        const container = startContainer;
        // nodeType === 3 means text node, can also check same using nodeName === '#text'
        if (container.nodeType === 3) {
            container.nodeValue = container.nodeValue.slice(0, startOffset) + value + container.nodeValue.slice(endOffset);
        }
    }
}
// Once you change the DOM, you can just get your HTML value from #editor.innerHTML

Этопростейший сценарий использования, который сейчас является вашим сценарием.Но возможно, что startContainer и endContainer - это разные узлы или они могут быть элементами DOM, а не простыми текстовыми узлами.Этот пример просто для того, чтобы указать вам правильное направление.

Вы можете обратиться к следующей документации, чтобы понять, как они на самом деле работают.

https://developer.mozilla.org/en-US/docs/Web/API/Selection

https://developer.mozilla.org/en-US/docs/Web/API/Range

РЕДАКТИРОВАТЬ: Рабочее решение для рассматриваемого вопроса 

function insertTextAndGetHTML(value) {
    replaceSelectionWith(value);
    return document.getElementById('editor').innerHTML;
}
...