asked on

How do i create the range object for the selected content in html

Hi Experts, I need a help

I want to change the content of html file loaded in an "object" element. In internet explorer it works fine but i am not able to do it in Firefox 2. I cant able to create the range object. Here my html page e:g

<html>
<body>
<div id="divFile">
<object id="file" type="text/html" data="abc.html"></object>
</div>
</body>
</html>

Here the java script code 
 
var userSelection;
var del;
if (window.getSelection) {       // for fire fox
userSelection=document.getElementById("file").contentDocument.getSelection();
del="<span class=msoDel>"+userSelection.toString()+"</span>";
userSelection.getRangeAt(0).execCommand("inserthtml",false,del);	
}
else if (document.selection) {              // for ie,  Opera!
userSelection = document.getElementById("file").selection.createRange();
}

Open in new window

Pravin Asar

Test the following code with FF ?

<html>
<head>
<title>Pravin Asar</title>
<script type="text/javascript">
var selection1, selection2;

function storeCurrentSelection () {
if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
var selectedRange = selection.getRangeAt(0);
return selectedRange.cloneRange();
}
else {
return null;
}
}
else if (document.selection) {
var selection = document.selection;
if (selection.type.toLowerCase() == 'text') {
return selection.createRange().getBookmark();
}
else {
return null;
}
}
else {
return null;
}
}

function restoreSelection (storedSelection) {
if (storedSelection) {
if (window.getSelection) {
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(storedSelection);
}
else if (document.selection && document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToBookmark(storedSelection);
range.select();
}
}
}
</script>
</head>
<body>
<h1>Storing and restoring text selection in Mozilla and in MSIE/Win</h1>
<p>You can select text in this page and then store the selection:
<input type="button" value="store current selection"
onclick="window.selection1 = storeCurrentSelection();">
</p>
<p>And here you can store a second selection:
<input type="button" value="store current selection"
onclick="window.selection2 = storeCurrentSelection();">
</p>
<p>Here you can restore the save selection:
<input type="button" value="restore first selection"
onclick="restoreSelection(selection1);">
<input type="button" value="restore second selection"
onclick="restoreSelection(selection2);">
</p>
</body>
</html>

jbmraja

ASKER

Your script is working fine. You are getting the selection and range object from the window.getSelection(). Please note down I am selecting the content from different file loaded in a div using object element. Iwould like to get the range object and execute the execCommand for the selected content available within the "object" element. Please see my script and the html page.

when I use the following code I can retrieve the selection object. After that when I get the range object by using the method userSelection.getRangeAt(0) it returns undifined. Following is the code,

userSelection = document.getElementById("file").contentDocument.getSelection();
userSelection.getRangeAt(0).execCommand("inserthtml",false,<del>+userSelection.toString()+</del>);

Can you suggest me how do I achieve my goal?

ASKER CERTIFIED SOLUTION

Pravin Asar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jbmraja

ASKER

i have loaded the file in div instead of object and use the getElementById() function to create the range

my html is

<div id="divFile"> </div>

window.getElementById("divFile").getSelection().getRangeAt(0)

Open in new window