CODEWITHSUNDEEP
javascriptjqueryrangy
Arvind
Arvind

Reputation: 6474

js beginner- how to get html for selected content in a web page along with entire node hierarchy for the selection

At http://rangy.googlecode.com/svn/trunk/demos/core.html there is a demo that shows how to get the HTML for content selected by a user.

However, I also want to obtain the entire structure of nodes, from top level node till the node to which the selected content belongs. How do I obtain this node structure? For example, please take a look at the sample content below

<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>

Now, if the user only selects the content "Some sample text that has been selected by user..." and if the above example I gave (using the "rangy" library) is used, then only the text "Some sample text that has been selected by user..." is shown as selected HTML by that library-- I want both the div and p's information also ... How do I do this? I would prefer jquery, but pure javascript or any other library, would also be OK with me...

Upvotes: 1

Views: 95

Answers (1)

Steve Campbell
Steve Campbell

Reputation: 3605

I don't think that the browsers think of text ranges in terms of the DOM. If it was easy then the rangy tool would probably supply that info. You'll probably have to hack it, perhaps by hooking into the mouseup event to determine the parent element that is in scope at the end of the selection.

It would be an expensive operation I think, but in jQuery something like 

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

...in that case, $(this) would be the DOM element where user left off selecting. I'd limit the scope as much as possible by using an appropriate selector instead of document above.

Here is a jsFiddle to play with it (run with the console open to see the results): http://jsfiddle.net/8uzgt/2/

Upvotes: 1

Related Questions