1

http://rangy.googlecode.com/svn/trunk/demos/core.htmlには、ユーザーが選択したコンテンツのHTMLを取得する方法を示すデモがあります。

ただし、最上位ノードから選択したコンテンツが属するノードまで、ノードの構造全体を取得したいと思います。このノード構造を取得するにはどうすればよいですか？たとえば、以下のサンプルコンテンツをご覧ください。

<div id="toplevelnotselectedbyuser">

<p id="thispisselectedbyuser">
This text is not selected by the user...
Some sample text that has been selected by user...
Some more text that has not been selected by the user.
</p>
</div>

ここで、ユーザーが「ユーザーによって選択されたいくつかのサンプルテキスト...」というコンテンツのみを選択し、上記の例（「rangy」ライブラリを使用）を使用した場合、「いくつかのサンプルテキストユーザーによって選択されました...」は、そのライブラリによって選択されたHTMLとして表示されます-divとpの両方の情報も必要です...これを行うにはどうすればよいですか？私はjqueryを好みますが、純粋なjavascriptやその他のライブラリも問題ありません...

4

1 に答える 1

1

ブラウザーがテキスト範囲を DOM の観点から考えているとは思いません。それが簡単であれば、rangy ツールはおそらくその情報を提供するでしょう。おそらく mouseup イベントにフックして、選択の最後にスコープ内にある親要素を決定することによって、おそらくそれをハックする必要があります。

それは高価な操作だと思いますが、jQueryでは次のようなものです

$(document).on('mouseup','*',function(e) {
  console.log($(this));
  return false;
});​

...その場合、 $(this) は、ユーザーが選択を中断した DOM 要素になります。上記の代わりに適切なセレクターを使用して、スコープを可能な限り制限しますdocument。

これを使用する jsFiddle を次に示します (コンソールを開いて実行し、結果を確認します): http://jsfiddle.net/8uzgt/2/

于 2012-07-26T02:41:24.980 に答える