3

テキスト部分とリンクを含む contentEditable div を作成しました。リンクをダブルクリックすると、リンク テキストが選択されます。

<div contentEditable="true">
   This is a text and <a href="http://www.google.com">This_is_a_link</a>
</div>

その後、document.getSelection().getRangeAt(0).startContainer を呼び出すと、div が返されます。

// => <div contenteditable="true">

リンクの代わりに。div のどの部分が選択されているかを見つける方法が見つかりません。

この jsfiddle を参照してください (「This_is_a_link」をダブルクリックすると、startContainer のコンソール ログが表示されます): http://jsfiddle.net/UExsS/1/

(フィドルからの必須の JS コード)

$(function(){
    $('a').dblclick(function(e) {

        setTimeout(function() {
            console.log(window.getSelection().getRangeAt(0));
        }, 500);

    });
});

Chrome には正しい動作があることに注意してください。Chrome で上記の jsfiddle を実行すると、startContainer の textElement が得られます。

誰かがこの問題に遭遇しましたか? 回避策を見つけましたか？

4

1 に答える 1

3

Firefox のバグだとは思わないでください。実装の種類が違うだけです。リンクをダブルクリックすると、Firefox はテキストだけでなく a-tag 全体を選択するため、選択の親ノードは div コンテナーに正しく設定されます。

その点を証明するために、これらの数行のコードをフィドルに追加しました。

var linknode = window.getSelection().getRangeAt(0).commonAncestorContainer.childNodes[1];
console.log(linknode);        
console.log(window.getSelection().containsNode(linknode, false));

分岐フィドル: http://jsfiddle.net/XZ6vc/

実行すると、javascript コンソールにlinknodeにリンクが含まれていることが表示され、リンクが選択範囲に完全に含まれているかどうかのチェックで true が返されます。

これは、理想的ではありませんが、問題の解決策の 1 つでもあります。contenteditable 内のすべてのリンクを反復処理し、そのうちの 1 つが選択範囲に完全に含まれているかどうかを確認します。

アドバイスの一言: 必要がない場合は、車輪を再発明しないでください ;-) ニーズに合ったライブラリ/フレームワークがいくつかある可能性があります。

于 2013-10-07T22:20:28.783 に答える