javascript - 使用 Rangy，即使我通过 setStartBefore 方法扩展范围，range.canSurroundContents 方法仍然返回 false

Question

我有以下html：

<p>Morbi quis augue vitae quam <a href="#">pharetra| varius</a> at at| urna.</p>

选择用|字符标记。还有选择的截图：

我可以使用以下代码片段扩展此选择以包含整个“a”元素（使用 Rangy 库http://code.google.com/p/rangy/）：

$('body').on('mouseup', '[contenteditable]', function() {
var block = this,
    sel = rangy.getSelection(),
    range = sel.getRangeAt(0);

if (sel.anchorNode.parentNode !== block) {
    range.setStartBefore(sel.anchorNode);
    sel.setSingleRange(range, false);
    sel.refresh();
}
});

要查看它的实际效果，请查看http://jsfiddle.net/LTwkZ/1/

并且以下返回 true：

range.containsNode(anchorNode);

问题是“range.canSurroundContents()”返回“假”。'a' 元素完全包含在范围内，从开始到结束，为什么不能使用 'canSurroundContents()' 以及我怎么能，如果可能的话。

谢谢！

Answer 1

我认为问题在于anchorNode链接中的文本节点而不是链接本身，因此选择是在链接内而不是在链接之前开始的。在链接之前移动范围的开始应该修复它。此外，除非 Rangy 以外的其他内容对其进行了修改，否则无需调用refresh()选择，尽管这不会导致任何问题。

修改后的 jsFiddle：http: //jsfiddle.net/LTwkZ/2/

代码：

$('body').on('mouseup', '[contenteditable]', function() {
    var block = this,
    sel = rangy.getSelection(),
    range = sel.getRangeAt(0);

    if (sel.anchorNode.parentNode !== block) {
        range.setStartBefore(sel.anchorNode.parentNode);
        sel.setSingleRange(range, false);
    }
});