modifying and writing contents of a textRange

S

sentinel

Hi,

I’m trying to modify a DHTML editor that parses a style-sheet
via PHP and instead of modifying the tags via execCommand(), find a
way of writing inline styles by way of adding <span style=> tags
around the selected text.

Easier said than done. My first though was to do a search and replace
on the innerHTML, but falls down if there is more than one match (it
will only modify the first occurrence). I suspect that even if I could
find the text around the selected area, this could still fall down for
same reason.

So, I’ve got the selected text via the createTextRange() method.
How do I modify this text and write it back out to the textarea.

I suspect finding a way of finding the positioning within the
innerHTML would be useful, so any suggestions will be appreciated.

Rgds
Neil.
 
M

Martin Honnen

sentinel said:
Do you know of a solution that will work on Netscape 7.1 ?
Click to expand...

Netscape doesn't implement the document.selection object that IE has,
nor the TextRange that IE has.
It has a buggy implementation of the W3C DOM Level 2 Range specification
documented at
http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
which is connected to its selection object returned by
window.getSelection()
whose interface is documented at
http://lxr.mozilla.org/seamonkey/source/content/base/public/nsISelection.idl
Theoretically you should be able to use a method like surroundContents:
http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Surrounding
to wrap some range content into a span element for instance but last
time I have tried that with Netscape 7 it failed due to bugs.

When I try the following with Mozilla 1.7 or FireFox 0.9

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>does surroundContents work?</title>
<script type="text/javascript">
function wrapSelection (cssClassName) {
if (typeof window.getSelection != 'undefined') {
var selection = window.getSelection();
if (typeof selection.rangeCount != 'undefined' &&
selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
if (typeof range.surroundContents != 'undefined') {
var span = document.createElement('span');
span.className = cssClassName;
range.surroundContents(span);
}
}
}
}
</script>
<style type="text/javascript">
..selectionHighlight {
background-color: lightyellow;
}
</style>
</head>
<body>
<p>
Select some text in this paragraph with the mouse.
Then press the highlight button.
All for Kibology. Kibology for all.
</p>
<form action="" onsubmit="return false;">
<p>
<input type="button" value="highlight selection"
onclick="wrapSelection('selectionHighlight');">
</p>
</form>
</body>
</html>

I still get an error on the surroundContents call:

Error: uncaught exception: [Exception... "Index or size is negative or
greater than the allowed amount" code: "1" nsresult: "0x80530001
(NS_ERROR_DOM_INDEX_SIZE_ERR)" location:
"http://localhost/javascript/test20040623.html Line: 15"]

which I think is caused by the buggy Mozilla implementation of
Range/surroundContents.
 
S

sentinel

I guess I'm going to have to do a little experimentation...

I need to construct something that will work on an OS X browser as well as IE5+.

Martin Honnen said:
sentinel said:
Do you know of a solution that will work on Netscape 7.1 ?
Click to expand...

Netscape doesn't implement the document.selection object that IE has,
nor the TextRange that IE has.
It has a buggy implementation of the W3C DOM Level 2 Range specification
documented at
http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
which is connected to its selection object returned by
window.getSelection()
whose interface is documented at
http://lxr.mozilla.org/seamonkey/source/content/base/public/nsISelection.idl
Theoretically you should be able to use a method like surroundContents:
http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Surrounding
to wrap some range content into a span element for instance but last
time I have tried that with Netscape 7 it failed due to bugs.

When I try the following with Mozilla 1.7 or FireFox 0.9

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>does surroundContents work?</title>
<script type="text/javascript">
function wrapSelection (cssClassName) {
if (typeof window.getSelection != 'undefined') {
var selection = window.getSelection();
if (typeof selection.rangeCount != 'undefined' &&
selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
if (typeof range.surroundContents != 'undefined') {
var span = document.createElement('span');
span.className = cssClassName;
range.surroundContents(span);
}
}
}
}
</script>
<style type="text/javascript">
.selectionHighlight {
background-color: lightyellow;
}
</style>
</head>
<body>
<p>
Select some text in this paragraph with the mouse.
Then press the highlight button.
All for Kibology. Kibology for all.
</p>
<form action="" onsubmit="return false;">
<p>
<input type="button" value="highlight selection"
onclick="wrapSelection('selectionHighlight');">
</p>
</form>
</body>
</html>

I still get an error on the surroundContents call:

Error: uncaught exception: [Exception... "Index or size is negative or
greater than the allowed amount" code: "1" nsresult: "0x80530001
(NS_ERROR_DOM_INDEX_SIZE_ERR)" location:
"http://localhost/javascript/test20040623.html Line: 15"]

which I think is caused by the buggy Mozilla implementation of
Range/surroundContents.
Click to expand...
 
S

sentinel

The only way I could figure around this on Netscape 7.1/Mozilla is to
get the range, delete it, create a new node, insert new node contents,
then use a regular expression search and replace to modify the
innerHTML content.

The is a bit of a quick-fix hack, and major drawback to this is that
getSelection only returns text, not the HTML, so assume I have lots of
line breaks or paragraph breaks within the HTML source, these vanish
when I insert the new node contents.

I seriously can't think of a better way around this....

var re = /(&lt;span)([^&]+)(&gt;)([^&]+)(&lt;\/span&gt;)/img;
var re1 = /(<span[^>]+><\/span>)/img;

var selection = window.getSelection();
var copytext = selection.toString();

var newHTML = "<span style='//your style//'</span>";

rng = selection.getRangeAt(0);
selection.deleteFromDocument();
newRng = selection.getRangeAt(0);
replaceText = document.createTextNode(newHTML);
newRng.insertNode(replaceText)
var rp = window.document.body.innerHTML;
rp = rp.replace(re, "<span$2>$4</span>");
rp = rp.replace(re1, ""); // remove multiple redundant tags
window.document.body.innerHTML = rp;



Neil.


I guess I'm going to have to do a little experimentation...

I need to construct something that will work on an OS X browser as well as IE5+.

Martin Honnen said:
sentinel said:
Do you know of a solution that will work on Netscape 7.1 ?
Click to expand...

Netscape doesn't implement the document.selection object that IE has,
nor the TextRange that IE has.
It has a buggy implementation of the W3C DOM Level 2 Range specification
documented at
http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
which is connected to its selection object returned by
window.getSelection()
whose interface is documented at
http://lxr.mozilla.org/seamonkey/source/content/base/public/nsISelection.idl
Theoretically you should be able to use a method like surroundContents:
http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Surrounding
to wrap some range content into a span element for instance but last
time I have tried that with Netscape 7 it failed due to bugs.

When I try the following with Mozilla 1.7 or FireFox 0.9

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>does surroundContents work?</title>
<script type="text/javascript">
function wrapSelection (cssClassName) {
if (typeof window.getSelection != 'undefined') {
var selection = window.getSelection();
if (typeof selection.rangeCount != 'undefined' &&
selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
if (typeof range.surroundContents != 'undefined') {
var span = document.createElement('span');
span.className = cssClassName;
range.surroundContents(span);
}
}
}
}
</script>
<style type="text/javascript">
.selectionHighlight {
background-color: lightyellow;
}
</style>
</head>
<body>
<p>
Select some text in this paragraph with the mouse.
Then press the highlight button.
All for Kibology. Kibology for all.
</p>
<form action="" onsubmit="return false;">
<p>
<input type="button" value="highlight selection"
onclick="wrapSelection('selectionHighlight');">
</p>
</form>
</body>
</html>

I still get an error on the surroundContents call:

Error: uncaught exception: [Exception... "Index or size is negative or
greater than the allowed amount" code: "1" nsresult: "0x80530001
(NS_ERROR_DOM_INDEX_SIZE_ERR)" location:
"http://localhost/javascript/test20040623.html Line: 15"]

which I think is caused by the buggy Mozilla implementation of
Range/surroundContents.
Click to expand...
Click to expand...
 
T

Thomas 'PointedEars' Lahn

sentinel said:
Thanks for that. Do you know of a solution that will work on Netscape 7.1 ?
Click to expand...

The Gecko DOM as of Netscape 7.1, among other UAs, provides
`selectionStart' and `selectionEnd' properties for HTMLInputElement
and HTMLTextAreaElement objects:

function replaceSelection_Gecko(o, s)
{
var s2 = o.value;
o.value = s2.substring(0, o.selectionStart)
+ s + s2.substr(o.selectionEnd + 1);
}

replaceSelection_Gecko(document.forms[0].elements['myInput'], "foobar");
[...]
Click to expand...

Please do not top-post, see <http://jibbering.com/faq/>.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

need help modifying/enhancing a marquee script 2
comp.lang.c FAQ list Table of Contents 0
Suggestions on writing a sh <--> python Howto/Tutorial 0
comp.lang.c FAQ list Table of Contents 0
event handling through CSS and modifying style dynamically 2
Modifying all form elements - how? 7
A Brief Review of jQuery 1.5 13
comp.lang.c FAQ list Table of Contents 0

Members online

No members online now.
Total: 28 (members: 0, guests: 28)
Robots: 189

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,008
Latest member
Rahul737

Latest Threads

Top