Question

我正在扩展WYSIWYG HTML编辑器（适用于Firefox），我想在选择中添加标签。我无法在Mozilla Midas specification中找到完成此功能的功能。

有一个命令用HTML替换选择因此，如果我可以阅读选择内容，我可以将我的标签添加到此字符串。

window.getSelection()几乎可以正常工作，但它会让我nsISelection转换为纯文本字符串。

PS：document.getSelection()返回纯文本字符串，甚至不是nsISelection。

Answer 1

看看DOM Range spec。您可以使用以下命令从Firefox中的用户选择中获取Range：

var range = window.getSelection().getRangeAt(0);

请注意，某些浏览器（包括Firefox）允许多种选择，可以通过选择的getRangeAt()方法进行访问。

Range以DOM节点和这些节点内的偏移量表示。一旦得到Range，就不能直接做到你想要的，因为范围的边界可能在DOM树的不同层次的不同节点中，所以简单地用Range标记围绕Range的内容不是永远可能。您可以执行以下操作，但它会创建一个新的块元素来包含所选内容：

var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var div = document.createElement("div");
div.style.color = "yellow";
div.appendChild(selectionContents);
range.insertNode(div);

另一个，hacky，替代方法是使用execCommand() document方法来修改选择（例如通过将其设置为特定颜色），然后使用document.querySelectorAll或某些选择器库选择具有该颜色的元素，然后对其应用样式。

Answer 2

Tim Down的回答是正确的。但是有一个问题是extractContents（）将从dom中删除选择。你可以使用

window.getSelection().getRangeAt(0).cloneContents();

只获得所选内容的副本。然后，您可以使用新标签对其进行包装，然后用它替换选择。 Tim Down对跨越多个HTML元素的范围的关注当然是有效的。我认为一旦你获得了范围，它就会“修复”html，但是当你把它放回去时它可能会导致问题。 Here是Range对象的一个很好的资源。

Answer 3

window.getSelection（）将返回一个对象。您可以通过调用对象.toString（）方法将返回的选择对象用作字符串。

var selObj = window.getSelection();
var selectedText = selObj.toString();

https://developer.mozilla.org/en/DOM/window.getSelection

window.getSelection（）为我提供了所选的文本，但我想要HTML

3 个答案: