window.getSelection()为我提供了所选的文本,但我想要HTML

Question

我正在扩展一个WYSIWYG HTML编辑器(对于Firefox),我想在选择周围添加标签.我无法在Mozilla Midas规范中找到实现此功能的功能.

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

window.getSelection()几乎可以工作,但它给了我nsISelection转换为纯文本字符串.

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

Answer 1

看看DOM Range规范.您可以使用以下命令Range从Firefox中的用户选择中获取:

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

请注意,某些浏览器(包括Firefox)允许多个选择,可以通过getRangeAt()选择方法访问.

将Range在这些节点中的DOM节点和偏移量来表示.一旦获得了Range它,就不能直接做到你想要的,因为范围的边界可能位于DOM树的不同层次的不同节点中,因此用标签简单地围绕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

蒂姆唐的回答是正确的.但是有一个问题是extractContents()将从dom中删除选择.您可以使用

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

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

Answer 3

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

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

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