Range and selection objects both wrongly return start of document instead of cursor location in opera only*
Alessandro Zifiglio
Below i am including a simple test case.
Problem :
when in designmode(rich text editing) recently being supported by opera, I
am unable to insert elements at the cursor location, if the cursor is
located in an empty area, like in linebreaks.
As a matter of fact, the midas demo miserably fails, and deletes all content
from the document when trying to insert tables, images etc. here i'm
including a test case, and you can clearly see that the selection object's
focusNode and anchorNode properties return a reference to the wrong nodes.
More over the ranges startContainer and endContainer respectively return the
wrong elements. The only time it all works is when i have a selection. if
the selection is empty, then i get the wrong locations, more specifically
the location returned is the first element in the document.
included here is a simple test, please note that the same test on safari and
firefox works flawlessly and is the expected behaviour. I am also unable to
find a workaround to this issue. Right now i am defaulting back to downlevel
behaviour for opera which is something i do not want to do. I really need to
get this working in opera as well.
Thanks,
Alessandro zifiglio
http://zifiglio.blogspot.com
test case :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
#1 click in the empty space below this line
<br />
<br />
#2 click in the empty space below this line
<br />
<br />
<span>#3 click in the empty space below this line</span>
<br />
<br />
<div>#4 click in the empty space below this line</div>
<br />
<br />
#5 click in the empty space above this line
<div id="testresult" style="border:1px dashed red;color:red;"><span
style="text-decoration:underline">Test results</span><br /><br /></div>
</body>
<script type="text/javascript">
document.designMode = 'on';
// to test in firefox comment above line and uncomment below
//document.body.designMode = 'on';
window.onload = init;
function init()
{
document.onmouseup = function(e){
var sel = window.getSelection();
var range = sel.getRangeAt(0);
range.insertNode(document.createTextNode('This text is inserted
in the location i clicked. works perfectly in safari and firefox'));
var testResult = document.getElementById('testresult');
testResult.innerHTML += '<br />' + 'sel.anchorNode.nodeName: ' +
sel.anchorNode.nodeName;
testResult.innerHTML += '<br />' + 'sel.anchorNode content: ' +
getContents(sel.anchorNode);
testResult.innerHTML += '<br />' + 'sel.focusNode.nodeName: ' +
sel.focusNode.nodeName;
testResult.innerHTML += '<br />' + 'sel.focusNode content: ' +
getContents(sel.focusNode);
testResult.innerHTML += '<br />' +
'range.startContainer.nodeName: ' + range.startContainer.nodeName;
testResult.innerHTML += '<br />' + 'range.startOffset: ' +
range.startOffset;
testResult.innerHTML += '<br />' + 'range.startContainer
content: ' + getContents(range.startContainer);
testResult.innerHTML += '<br />' + 'range.endContainer.nodeName:
' + range.endContainer.nodeName;
testResult.innerHTML += '<br />' + 'range.endOffset: ' +
range.endOffset;
testResult.innerHTML += '<br />' + 'range.endContainer content:
' + getContents(range.endContainer);
testResult.innerHTML += '<br />' +
'range.commonAncestorContainer: ' +
getContents(range.commonAncestorContainer);
testResult.innerHTML += '<br />' +
'document.body.childNodes[range.startOffset]:' +
document.body.childNodes[range.startOffset];
testResult.innerHTML += '<br />' +
'document.body.childNodes[range.endOffset]:' +
getContents(document.body.childNodes[range.endOffset]);
testResult.innerHTML += '<hr />';
}
}
function getContents(node)
{
var nodeName = node.nodeName.toLowerCase();
var flag1 = (nodeName == 'html' || nodeName == 'body');
if (node.nodeType == 1 && !flag1)// element node
return node.innerHTML;
else if (node.nodeType == 3 && !flag1)// textnode
return node.nodeValue;
else if (flag1)
return nodeName + ' - content too large, truncated';
}
</script>
</html>
Tim Altman
<Alessandr...@hotmail.com> wrote:
>hi, looks like there is a bug in opera's range object and selection objects.
>Below i am including a simple test case.
>Problem :
>when in designmode(rich text editing) recently being supported by opera, I
>am unable to insert elements at the cursor location, if the cursor is
>located in an empty area, like in linebreaks.
>As a matter of fact, the midas demo miserably fails, and deletes all content
>from the document when trying to insert tables, images etc. here i'm
>including a test case, and you can clearly see that the selection object's
>focusNode and anchorNode properties return a reference to the wrong nodes.
>More over the ranges startContainer and endContainer respectively return the
>wrong elements. The only time it all works is when i have a selection. if
>the selection is empty, then i get the wrong locations, more specifically
>the location returned is the first element in the document.
>
>included here is a simple test, please note that the same test on safari and
>firefox works flawlessly and is the expected behaviour. I am also unable to
>find a workaround to this issue. Right now i am defaulting back to downlevel
>behaviour for opera which is something i do not want to do. I really need to
>get this working in opera as well.
This problem is fixed in Kestrel[1].
[1] http://en.wikipedia.org/wiki/Opera_(Internet_suite)#Kestrel
--
Tim Altman
Desktop QA
Opera Software
Remove NO SPAM from e-mail address to reply