javascript / WYSIWYG parentElement, возвращающий div вместо элемента p

Question

Я пытаюсь создать редактор WYSIWYG с использованием JavaScript, используя contentEditable = true. Я застрял в том, что в IE document.selection.createRange (). ParentElement () возвращает элемент, для которого contenteditable установлено значение true. Для более легкого понимания приведу пример:

<div contenteditable="true">
   <p>lorem ip|sum dolor</p>
</div>

В этом примере '| 'представляет карету. В то время как в chrome, когда я использую commonAncestorContainer, в этом примере возвращаемым элементом является p, в IE parentElement возвращает контейнер div. В моем понимании браузер игнорирует элементы, и поэтому я не могу понять, какой элемент находится в центре внимания. Я не буду спрашивать «есть ли способ», так как я видел довольно хорошо работающие редакторы WYSIWYG, поэтому мой вопрос в том, как я могу получить «настоящий» родительский элемент в этом примере? :)

А, кстати, поскольку я новый пользователь, я не могу создавать теги. Я считаю, что "parentElement" будет хорошим тегом для этого вопроса.

Answer 1

DOM Range commonAncestorContainer и TextRange parentElement() немного отличаются: commonAncestorContainer возвращает самый глубокий узел (который может быть текстовым узлом), который содержит весь диапазон, тогда как parentElement() возвращаетсамый глубокий элемент , который содержит весь TextRange.В вашем примере commonAncestorContainer будет текстовым узлом "lorem ipsum dolor", а parentElement() вернет элемент <p>.Если это то, что вы хотите, вы можете получить это с помощью Range, проверив commonAncestorContainer 'nodeType:

var containerElement = range.commonAncestorContainer;
if (containerElement.nodeType == 3) {
    containerElement = containerElement.parentNode;
}