Как правильно установить выделение в div contenteditable

Question

Как правильно установить выделение в div contenteditable

Ржач Ученик (29), на голосовании 1 год назад

если в div уже имеется 12 строк заполненных. Нужно сделать выделение в 7 строке допустим, начиная с 5 символа и заканчивая 9.

код вроде такой должен быть..

         range.setStart(enterNote.firstChild, anchorOffset); 
        range.setEnd(enterNote.firstChild, focusOffset); 
 
        document.getSelection().removeAllRanges(); 
        document.getSelection().addRange(range);

только вот не задача.. диапозон берётся по строке node.. как пробежаться по всем строкам и поставить выделение там где оно должно быть?

Answer 1

EVK IT Сервис К Мыслитель (5236) 1 год назад

Зависит от того, как текст в этом div разбивается на строки, каждая строка - это node с индексом с 0. Грубо говоря в твоем случае типа такого:

 range.setStart(div.childNodes[6], 5); 
range.setEnd(div.childNodes[6], 9);

Чтобы точно понять, дай html код этого дива с текстом

РжачУченик (29) 1 год назад

 qwertyuiop
1323456790

asdfhhgjjeelllq

eooqweoqoeqwejjq

qkej qweqwe qwe qwe

EVK IT Сервис К Мыслитель (5236) Ржач, let range = new Range(); var root_node = document.querySelector('.enterNote'); var text_lines = [0,2,4,6,8]; var line_start = 0, line_end =2; if (root_node.childNodes) { range.setStart(root_node.childNodes[text_lines[line_start]], 2); range.setEnd(root_node.childNodes[text_lines[line_end]], 2); root_node.childNodes.forEach(element => console.log(element.nodeType)); } window.getSelection().addRange(range);

РжачУченик (29) 1 год назад

и на мышь повесил когда кнопка отжата

     selectedText = document.getSelection(); //получаю выдление 
    textNode = document.getSelection().anchorNode.parentNode; //получаю родительский узел 
    anchorOffset = selectedText.anchorOffset; //начало выделения 
    focusOffset = selectedText.focusOffset; //конец выделения