1

在http://rangy.googlecode.com/svn/trunk/demos/core.html有一个演示，展示了如何获取用户选择的内容的 HTML。

但是，我还想获得节点的整个结构，从顶级节点到所选内容所属的节点。我如何获得这个节点结构？例如，请看下面的示例内容

<div id="toplevelnotselectedbyuser">

<p id="thispisselectedbyuser">
This text is not selected by the user...
Some sample text that has been selected by user...
Some more text that has not been selected by the user.
</p>
</div>

现在，如果用户只选择内容“用户选择的一些示例文本......”并且如果使用我给出的上述示例（使用“rangy”库），那么只有文本“一些示例文本已被用户选择...”显示为该库选择的 HTML——我还想要 div 和 p 的信息...我该怎么做？我更喜欢 jquery，但纯 javascript 或任何其他库对我来说也可以...

4

1 回答 1

1

我不认为浏览器会根据 DOM 来考虑文本范围。如果这很容易，那么范围广泛的工具可能会提供该信息。您可能不得不破解它，也许通过挂钩 mouseup 事件来确定选择结束时范围内的父元素。

我认为这将是一项昂贵的操作，但在 jQuery 中类似于

$(document).on('mouseup','*',function(e) {
  console.log($(this));
  return false;
});​

...在这种情况下， $(this) 将是用户停止选择的 DOM 元素。document我会通过使用适当的选择器而不是上面的来尽可能地限制范围。

这是一个 jsFiddle 玩它（打开控制台运行以查看结果）：http: //jsfiddle.net/8uzgt/2/

于 2012-07-26T02:41:24.980 回答