0

私は次の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（）'を使用できない理由と、可能であれば、どうすればよいですか。

ありがとう！

4

1 に答える 1

2

anchorNode問題は、リンク自体ではなくリンク内のテキストノードであるため、選択はリンクの前ではなくリンク内で開始されることだと思います。リンクの前に範囲の開始を移動すると、修正されるはずです。refresh()また、 Rangy以外が変更しない限り、選択を呼び出す必要はありませんが、ここでは問題は発生しません。

改訂された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);
    }
});
于 2012-10-31T09:36:56.557 に答える