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.
}

如果文本选择在特定div中

1 个答案: