Connecting Tech Pros Worldwide Help | Site Map

How to get nodes from selection?

 
LinkBack Thread Tools Search this Thread
  #1  
Old March 1st, 2007, 01:55 PM
reflex
Guest
 
Posts: n/a
Default How to get nodes from selection?

I have to get every node within range or selection? Is it possible?

Sry for my engrish :]
Ref


  #2  
Old March 1st, 2007, 02:15 PM
ASM
Guest
 
Posts: n/a
Default Re: How to get nodes from selection?

reflex a écrit :
Quote:
I have to get every node within range or selection? Is it possible?
give example of your code to get the selection

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
  #3  
Old March 1st, 2007, 02:25 PM
reflex
Guest
 
Posts: n/a
Default Re: How to get nodes from selection?


ASM napsal:
Quote:
reflex a écrit :
Quote:
I have to get every node within range or selection? Is it possible?
>
give example of your code to get the selection
>
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

I am writing plugin for FCK editor

var oEditor = FCKeditorAPI.GetInstance('FCKeditor1');
var eSelected = oEditor.EditorDocument.selection;
var rSelected = eSelected.createRange();

its same like

var rSelected = document.selection.createRange();

  #4  
Old March 1st, 2007, 05:45 PM
Elegie
Guest
 
Posts: n/a
Default Re: How to get nodes from selection?

reflex wrote:

Hi Reflex,
Quote:
I have to get every node within range or selection? Is it possible?
In IE, you can only get nodes of type 'element', which would restrict
your requirement. In browsers supporting the W3C Range Model, you could
get to the node level.

Following is some example of the function you are looking for, tested
IE5+, Firefox 2, Opera 9. You may have to filter for the elements
returned by the function, though. Have fun.


HTH,
Elegie.

---
<style type="text/css">
#s1 { border : solid 1px #c00; }
#s2 { border : solid 1px #0c0; }
#s3 { border : solid 1px #00c; }
#result { color : #aaa; margin : 10px; }
</style>

<div id="result">&nbsp;</div>
<div id="container">
<span id="s1">Old Artist</span>
<span id="s2">Nothing Else</span>
<span id="s3">Skyscraper</span>
</div>

<script type="text/javascript">
function getElementsFromSelection(){
var nodes=null, candidates=[], children, el, parent, rng;

// Main
rng=getSelectionRange();
if(rng) {
parent=getCommonAncestor(rng);
if(parent) {
// adjust from text node to element, if needed
while(parent.nodeType!=1) parent=parent.parentNode;

// obtain all candidates from parent (excluded)
// up to BODY (included)
if(parent.nodeName.toLowerCase()!="body") {
el=parent;
do {
el=el.parentNode;
candidates[candidates.length]=el;
} while(el.nodeName.toLowerCase()!="body");
}

// obtain all candidates down to all children
children=parent.all||parent.getElementsByTagName(" *");
for(var j=0; j<children.length; j++)
candidates[candidates.length]=children[j];

// proceed - keep element when range touches it
nodes=[parent];
for(var ii=0, r2; ii<candidates.length; ii++) {
r2=createRangeFromElement(candidates[ii]);
if(r2 && rangeContact(rng, r2))
nodes[nodes.length]=candidates[ii];
}
}
}
return nodes;

// Helpers
function getSelectionRange() {
var rng=null;
if(window.getSelection) {
rng=window.getSelection();
if(rng && rng.rangeCount && rng.getRangeAt) {
rng=rng.getRangeAt(0);
}
} else if(document.selection && document.selection.type=="Text") {
rng=document.selection.createRange();
}
return rng;
}

function getCommonAncestor(rng) {
return rng.parentElement ?
rng.parentElement() : rng.commonAncestorContainer;
}

function rangeContact(r1, r2) {
var p=null;
if(r1.compareEndPoints) {
p={
method:"compareEndPoints",
StartToStart:"StartToStart",
StartToEnd:"StartToEnd",
EndToEnd:"EndToEnd",
EndToStart:"EndToStart"
}
} else if(r1.compareBoundaryPoints) {
p={
method:"compareBoundaryPoints",
StartToStart:0,
StartToEnd:1,
EndToEnd:2,
EndToStart:3
}
}
return p && !(
r2[p.method](p.StartToStart, r1)==1 &&
r2[p.method](p.EndToEnd, r1)==1 &&
r2[p.method](p.StartToEnd, r1)==1 &&
r2[p.method](p.EndToStart, r1)==1
||
r2[p.method](p.StartToStart, r1)==-1 &&
r2[p.method](p.EndToEnd, r1)==-1 &&
r2[p.method](p.StartToEnd, r1)==-1 &&
r2[p.method](p.EndToStart, r1)==-1
);
}

function createRangeFromElement(el) {
var rng=null;
if(document.body.createTextRange) {
rng=document.body.createTextRange();
rng.moveToElementText(el);
} else if(document.createRange) {
rng=document.createRange();
rng.selectNodeContents(el);
}
return rng;
}
};

// Test
window.onload = function(evt) {
setInterval(
function(){
var buf=[];
var nodes=getElementsFromSelection();
if(nodes) {
for(var ii=0; ii<nodes.length; ii++) {
buf[buf.length]=nodes[ii].nodeName+"&lt;"+nodes[ii].id+"&gt";
}
document.getElementById("result").innerHTML=buf.jo in(", ");
}
},
42
);
}
</script>
---
  #5  
Old March 1st, 2007, 08:35 PM
reflex
Guest
 
Posts: n/a
Default Re: How to get nodes from selection?

Thank you so much Elegie. Works great

 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,989 network members.