Блог

У меня есть небольшой редактор WYSIWYG, встроенный в JavaScript.

Он работает по методу getrange:

 const range = window.getSelection().getRangeAt(0);
const oldConent = document.createTextNode(range.toString());
const newElement = document.createElement('span');
// do some style changes
newElement.append(oldConent);
range.insertNode(ulList);
 

Проблема в том, что теперь я могу настроить все на странице.

Как ограничить функциональность выбора из определенного div?

Что я пробовал

Я пытался избежать другого выбора с помощью простого условия if:

 // editable div contains the id 'textField'
if (range.endContainer.parentElement.id === 'textField') { ... }
 

Но это работает только тогда, когда выделение не является частью другого элемента.

Ваш диапазон будет иметь свойство range.commonAncestorContainer, которое указывает на самый глубокий узел, содержащий начальный и конечный узлы диапазона. Вы можете проверить, является ли этот узел конкретным div, который вы хотите, или, по крайней мере, дочерним узлом этого div.

Ваш код будет выглядеть примерно так

 const range = window.getSelection().getRangeAt(0);
  const textField = document.getElementById("textField");
  if (
    range.commonAncestorContainer.isSameNode(textField) ||
    textField.contains(range.commonAncestorContainer)
  ) {
    const oldConent = document.createTextNode(range.toString());
    const newElement = document.createElement('span');
    // do some style changes
    newElement.append(oldConent);
    range.insertNode(ulList);
  }