Is anyone out there really good with Internet Explorer scripting in the
document.selection / textRange area?

I'm trying to add a nice little formatting bar to the form at the bottom of
each page on the piclist.com site. This is to help people who don't
understand HTML to add things like bold, italic, etc... To the text they are
posting.

The goal is to make it such that it fails gracefully and yet takes advantage
of browser features as available. As it stands, a non-JavaScript browser
will never see the formatting buttons. A minimal browser will only be able
to have the formatting codes appended to the end of the text. The ideal
thing, and what I expect from IE, would be that when the user hits the
button for bold, if there is text selected, it puts <b> </b> around the text
and if there is no text selected, it just inserts the <b></b> and then:
/moves the cursor to the center so you can start typing bold text/. E.g. if
the | is the cursor, when there is no text selected, it should end up like
this: <b>|</b>.

I hope that makes sense. Now, I have all that working in IE /except/ for the
part about the position of the cursor. One is supposed to be able to move
the thing with the .move("character",distance) method to a textRange object
where distance is the negative or positive number of characters to move. And
I have seen it work before, but for some.... amazingly frustrating...
reason, it will not work here.

If you want to see the current state of it, just go to piclist.com and
scroll to near the bottom and look at the little form. The source for that
part is reproduced below. Any suggestions very appreciated.

---
James Newton: PICList webmaster/Admin
mailto:jamesnewton@piclist.com  1-619-652-0593 phone
http://www.piclist.com/member/JMN-EFP-786
PIC/PICList FAQ: http://www.piclist.com





<SCRIPT>
<!--- Hide script from old browsers.

function doStartEnd(anArea, startTxt, endTxt ) {
	if (document.selection) {
		anArea.focus();
		var aSel = ( anArea.caretPos ? anArea.caretPos :
document.selection.createRange() );
		if (aSel.text.charAt(aSel.text.length-1)==' ')
aSel.moveEnd('character',-1);
		aSel.text = startTxt + aSel.text + endTxt;
		anArea.createTextRange().move("character",-4);
		}
	else if (typeof(textarea.selectionStart) != "undefined") {
		// Mozilla text range replace.
		var text = new Array();
		text[0] = anArea.value.substr(0, anArea.selectionStart);
		text[1] = anArea.value.substr(anArea.selectionStart,
anArea.selectionEnd - anArea.selectionStart);
		text[2] = anArea.value.substr(anArea.selectionEnd);
		var caretPos = anArea.selectionEnd + startTxt.length +
endTxt.length;
		anArea.value = text[0] + startTxt + text[1] + endTxt +
text[2];
		if (anArea.setSelectionRange) {
			anArea.focus();
			anArea.setSelectionRange(caretPos, caretPos);
			}
		}
	else {
		anArea.value += startTxt + aSel.text + endTxt;
		}
	}

function doTag(anArea,aTag) {
	doStartEnd(anArea,'<'+aTag+'>','</'+aTag+'>');
	}

function doTagAttrib(anArea,aTag,anAttrib,aValue) {
	doStartEnd(anArea,'<'+aTag+'
'+anAttrib+'=\"'+aValue+'\">','</'+aTag+'>');
	}
	
function storeCaret(text) {
	if (text.createTextRange) text.caretPos =
document.selection.createRange().duplicate();
	// save the state of the selection because clicking on the button
leaves the text area and 
	// destroys the select.
	}

document.write('<A TITLE=\'Bold\'
onClick="javascript:doTag(text,\'b\');"><B>B</B></A> ')
document.write('<A TITLE=\'Italic\'
onClick="javascript:doTag(text,\'i\');"><i>I</i></A> &nbsp;')
document.write('<A TITLE=\'Underline\'
onClick="javascript:doTag(text,\'u\');"><u>u</u></A> &nbsp;')
document.write('<A TITLE=\'Blockquote\'
onClick="javascript:doTag(text,\'blockquote\');">&quot;&quot;</A> ')
document.write('&nbsp; <A TITLE=\'Link\'
onClick="javascript:doTagAttrib(text,\'a\',\'href\',prompt(\'Enter
url\',\'http://www.\'));">&infin;</A> ')
// End the hiding here. -->
</SCRIPT>

<BR><TEXTAREA NAME="text" ROWS="4" COLS="65" onselect="storeCaret(this);"
onclick="storeCaret(this);" onkeyup="storeCaret(this);"
onchange="storeCaret(this);">
</TEXTAREA>

-- 
http://www.piclist.com PIC/SX FAQ & list archive
View/change your membership options at
http://mailman.mit.edu/mailman/listinfo/piclist