javascript - window.getSelection() 给我选定的文本，但我想要 HTML

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 树不同级别的不同节点中，所以只需用一个围绕范围的内容标记并不总是可能的。您可以执行类似以下操作，但它会创建一个新的 block 元素来包含所选内容:

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 替代方法是使用 document 的 execCommand() 方法来修改选择(例如，通过将其设置为特定颜色)，然后使用 document.querySelectorAll 或一些选择器库来选择具有该颜色的元素，然后对其应用样式。