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()”返回“false”。 '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);
    }
});