Чего я пытаюсь достичь:
У меня есть contenteditable div (в частности, ни textarea, ни input). Когда пользователь редактирует содержимое этого div, он может оставить div и нажать кнопку в другом месте на странице, чтобы вставить диапазон (который содержит предопределенные китайские символы) в div. Мне нужен диапазон до go в div в точке выбора. На данный момент я предполагаю, что выбор будет происходить просто по последней позиции курсора.
То, что мне удалось до сих пор:
Я получил смещение символа каретки и сохранил его в другом месте на странице. Затем я взял смещение и попытался вставить его, используя range.insertNode. Однако я заметил, что смещение, которое я получал, было количеством символов, поэтому я получал сообщение об ошибке, говорящее, что на моем смещении нет узла.
Затем я прочитал это: https://javascript.info/selection-range <- Это заставило меня понять, что группы символов обрабатывались как «узлы». Итак, только что осознав, что мое смещение должно быть значением узла, я здесь, чтобы применить диапазон в нужном месте (я думаю, что это сработает): </p>
function insertAtOffset(parent, child, offset = 0){
range = document.createRange();
range.selectNode(parent);
range.setStartBefore(parent.childNodes[offset]);
range.insertNode(child);
}
Однако я Я вернулся к исходной точке с точки зрения получения смещения узла для вставки.
Я думаю, что решение может быть связано с: var node = document.getSelection().anchorNode; который я взял из: Получить узел элемента в позиции курсора (в contentEditable) , но я не уверен, как получить смещение узла таким образом, чтобы это помогло с моей функцией ввода диапазона.
Specifi c вопрос:
Как мне получить узел смещение в текущей позиции курсора?
Я буду использовать несколько событий для сохранения этого местоположения, а затем вставлять в него, когда пользователь нажимает кнопку для китайского символа.
Примечание: я чувствую себя немного глубже во Front End, чем мне удобно. Поэтому я буду поддерживать любые ответы, которые предоставляют дополнительный контекст или информацию, которая способствует моему пониманию проблемы и / или решения.