javascript - 如果文本选择在特定的 div 内

Question

我正在contenteditable=true尝试制作一个文本编辑器。我已经成功地用来getSelection()将选择包装在 HTML 标记中。

但是，一个问题是，如果用户在编辑器之外选择文本并单击操作按钮，则该文本也将被包裹在标签内。

我将如何使用getSelection()，检查选择是否在编辑器类的 div 内？

编辑：

当前使用此代码：

var sel = window.getSelection ? window.getSelection() : document.selection.createRange();

if(sel.getRangeAt){
    var range = sel.getRangeAt(0);
    var newNode = document.createElement("p");
    newNode.setAttribute('class', operationClass);
    range.surroundContents(newNode);
} else {
    sel.pasteHTML('<p class="' +  operationClass +'">'+sel.htmlText+'</p>');
}

Answer 1

拥有后var range = sel.getRangeAt(0);，您可以range.commonAncestorContainer使用如下代码确定其祖先是否或其中之一是编辑器容器：

var ancestor = range.commonAncestorContainer;
while (ancestor.id != "editor" // Check id, class or otherwise
       && ancestor.parentElement != null) {
    ancestor = ancestor.parentElement;
}

if (ancestor.id == "editor") {
    // Selection is within the editor.
}