jqueryで選択したテキストに何かを追加する

ユーザーが右クリックしたときに選択したテキストに<a>タグを追加しようとしています。スタックを検索して一致するものが見つかりませんでした。jqueryで選択したテキストに何かを追加する

2012-02-15 bizzr3

選択したテキストを確実に処理するのは、少し面倒なクロスブラウザです。ティムダウンの図書館Rangyはそこでは役に立つかもしれませんが、彼は多くのブラウザの特質の上で滑らかです。

core Rangy demosのうちの1つは、選択されたテキストを要素で囲みます（the RangyRange#surroundContents methodを使用しています）。デモではそのためのコードは次のようになります：あなたはずっと同じことをやってますが、aはなくspanとされると思い

function getFirstRange() { 
    var sel = rangy.getSelection(); 
    return sel.rangeCount ? sel.getRangeAt(0) : null; 
} 
function surroundRange() { 
    var range = getFirstRange(); 
    if (range) { 
     var el = document.createElement("span"); 
     el.style.backgroundColor = "pink"; 
     try { 
      range.surroundContents(el); 
     } catch(ex) { 
      if ((ex instanceof rangy.RangeException || Object.prototype.toString.call(ex) == "[object RangeException]") && ex.code == 1) { 
       alert("Unable to surround range because range partially selects a non-text node. See DOM Level 2 Range spec for more information.\n\n" + ex); 
      } else { 
       alert("Unexpected errror: " + ex); 
      } 
     } 
    } 
}

。

出典

2012-02-15 08:48:25

+1素晴らしいもの：

$("#rightclick").mousedown(function(e) { if (e.which === 3) { $(this).append("<a href='http://www.google.com'>Link</a>"); } });

はデモを参照してください！ – gideon

いい仕事ですが、プラグインなしでこれを行う方法はありますか？ – bizzr3

@bizzare：私が上で述べたように、あなたがRangyをそのまま使用したくないなら、あなたはRangyがそれをやっている方法を研究し、その技術を適用することができます。 'getSelection'と' surroundContents'がどのように動作するかを見てください。これは、[Rangyオープンソース]（http://code.google.com/p/rangy/source/browse/trunk/src/#src%2Fjs%2Fcore）を作成したTimの喜びであり、難読化していません。 –

EDIT選択したテキストについて少し遅れて話していたことに気付きました。

おそらくdocument.elementFromPointを確認できますが、FireFoxでのみサポートされていると思います。

あなたはこのような何かを探しています：

HTML：

<div id="rightclick"> 
Right Click me: 
</div>

Javascriptを： http://jsfiddle.net/BgW7x/2/

出典

2012-02-15 08:50:45 gideon

OPは** selected ** text（質問とタグの両方で） –

ああ、彼は右クリックで選択したテキストを取得することを意味します、ああ、少年、。 – gideon

ええ、私は選択したテキストにあなたのコードをdivの最後にリンクを追加したい – bizzr3

jqueryで選択したテキストに何かを追加する

答えて

関連する問題