Topic awaiting preservation: Super-simple textarea tag-o-matic: cross-browser? (Page 1 of 1)

So I've got reason to make a really simple "select some text, click a link, tags appear" device for a website. Nothing fancy, just bold, italic, URL -- the usual. And I've adapted some code to do what I want, and life is fine, almost; but this code only seems to work in IE, not Opera 7 or Mozilla. It's not a major issue, since my client probably wouldn't even think of testing it in a non-IE browser (he refers to the site as 'his web,' and he keeps forgetting his browser has a Back button), but my personal pride makes me want to get it working cross-browser.

I've always avoided JavaScript like the plague, specifically so I wouldn't have to worry about a dazzling thicket of cross-browser problems that makes CSS support look like "1 + 1 = 2" by comparison. Perhaps one of you could point out exactly what I'm doing that's IE-specific, and what I could replace it with?

function addFormatTags(tag)

{

	// if no text selected, ditch.

	if (!document.selection) return;



	// transform current selection into TextRange object

	var target_string = document.selection.createRange().text;



	// if failed, ditch.

	if (!target_string) return;



	new_text = '<' + tag + '>' + target_string + '</' + tag + '>';



	document.selection.createRange().text = new_text;

}

And then I'm calling it with links like:

<a href="javascript:addFormatTags('strong')" title="make selected text bold">Bold</a>

If anyone knows a good resource detailing browser support for various JavaScript objects/methods, and a sort of "equivalency tree" to assist in translating from non-compatible to more-compatible methods, I'd be grateful.

Unfortunately I don't think the "createRange" bit is supported



.:[ Never resist a perfect moment ]:.

[This message has been edited by bitdamaged (edited 03-12-2003).]

I think createRange *is* supported, but differently - specifically, you can't use document.selection to get the selection range. Check out
http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

for the right way to do it, which mozilla and opera probably support.

I'm having a really hard time with this, since standards-compliant DOM-based Javascript seems to be little-discussed... the only things I've been finding are W3 recommendations, which are a bit too cryptic for me, and platform-specific stuff from the late 90s.

I thought I had something that would work, but obviously I'm missing the very basics. I'm trying to start my function with this line:

range = Document.createRange();

This is directly from the Mozilla DOM reference, last updated Dec 2002. I was kind of hoping the Mozilla reference was based on the (supposedly universal) W3 standard, but Internet Explorer and Opera both tell me the Document variable doesn't exist... fine. I tried window.document.createRange(), and now IE and Opera just tell me they don't have that function to begin with. Okay...

Now, Mozilla is fine with Document.createRange(), but from there I tried to send properties of the Selection object to the setStart and setEnd methods of the Range object, and wouldn't you know it? Mozilla is throwing uncaught exception errors at me (which implies that I'm doing something the programmers hadn't even thought about.)

If anyone can suggest a little something, that would be great, but right now I'm switching back to the IE-only stuff, and my anti-JavaScript stance has been hardened a great deal.