JavaScript Range.commonAncestorContainer — спільний предок діапазону

Властивість commonAncestorContainer повертає найближчий вузол, що містить увесь діапазон цілком.

автор: NagarD

Загальний опис

Якщо виділення не виходить за межі одного абзацу, це буде текстовий вузол усередині нього. Якщо тягнеться через кілька абзаців — їхній спільний батько.

Головне застосування — перевірити межі: чи виділення взагалі всередині мого редактора, чи користувач зачепив і сусідні блоки. Без цієї перевірки кнопка форматування зіпсує розмітку поза редактором.

автор: NagarD

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
commonAncestorContainer	1+	1+	1+	7+	12+	9+

Підтримка: мобільні переглядачі
Переглядач
commonAncestorContainer	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

Не форматувати те, що виділили поза редактором.

HTML

<div id="editor" contenteditable>Текст редактора</div>
<p>Текст поза редактором</p>

// у демо виділення створюємо самі; вручну виділи текст і спробуй ще раз
const initialRange = document.createRange();
initialRange.selectNodeContents(document.getElementById('editor').firstChild);
window.getSelection().removeAllRanges();
window.getSelection().addRange(initialRange);

const editor = document.getElementById('editor');
const range = window.getSelection().getRangeAt(0);

// виділення вийшло за межі редактора?
if (!editor.contains(range.commonAncestorContainer)) {
    console.warn('Виділення поза редактором — не чіпаємо');
} else {
    range.surroundContents(document.createElement('b'));
    console.log('Виділене в редакторі зроблено жирним');
}

автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!