Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Range и пользовательское выделение (https://javascript.ru/forum/events/41951-range-i-polzovatelskoe-vydelenie.html)

mi.rafaylik 06.10.2013 16:37

Range и пользовательское выделение
 
Известно, насколько негибкий и неоднозначный execCommand.
Альтернативой являются объекты Range, TextRange и пользовательское выделение Selection, но разобраться с ними не так просто.
Пример из основ, пока что для всех браузеров, кроме IE:
// получить range-объект из выделенного текста можно так
var sel = document.getSelection().getRangeAt(0);
// обернуть выделенный текст (range-объект) тегом
sel.surroundContents(document.createElement('h1'));

Вопрос: как проверять, в каком теге (тегах) уже находится выделенный текст, чтоб не получить многократное оборачивание?
<div contenteditable="true">
	<p>First paragraph</p><p>Second paragraph. <b>Bold text</b>.</p>
<div>

danik.js 06.10.2013 17:27


mi.rafaylik 06.10.2013 18:10

Странно но Firefox и Webkit-браузеры по-разному возвращают ссылку на commonAncestorConteiner.
Если внутри элемента выделена лишь часть текста, ссылка одинаковая - на элемент.
Если выделить весь текст элемента, Webkit ссылаются на сам элемент, в который вложен текст, а Firefox ссылается на родителя этого элемента, то есть при выделении учитываются теги.
Кажется эта область называется Node.


Часовой пояс GMT +3, время: 19:01.