Quote: " I think it would be too much work to get FF to insert the tags in the correct place (like IE)"
Apparantly, you didn't take a look at my post. Just for your benefit, I'll post the code right here as well.
<html>
<head>
<title>A quick test</title>
</head>
<script type="text/javascript">
function SetSelectedText( elementID, text, OpenTag, btnObj, btnText )
{
var obj = document.getElementById( elementID );
if( !obj )
throw "Element " + elementID + " not found!";
//Netscape, Mozilla, Firefox
if( typeof(obj.selectionStart) != "undefined" )
{
obj.focus();
var scrollTop = obj.scrollTop; // before you assign the "value", and
var start_selection = obj.selectionStart;
var end_selection = obj.selectionEnd;
if (end_selection < start_selection)
{
var temp = end_selection;
end_selection = start_selection;
start_selection = temp;
}
// Sad, but true: You actually have to replace *all* of the text in
// the text input to replace the selection in Mozilla browsers!
if (start_selection==end_selection)
{
if (OpenTag==true)
{
tag="[" + text + "]";
btnObj.value = btnText + "*";
}
else
{
tag="[/" + text + "]";
btnObj.value = btnText;
}
var startText = (obj.value).substring(0, start_selection);
var endText = (obj.value).substring(end_selection, obj.textLength);
obj.value = startText + tag + endText;
//Put the cursor at the end of the selected text;
obj.selectionStart = start_selection + tag.length;
obj.selectionEnd = start_selection + tag.length;
obj.scrollTop = scrollTop //Make it so it doesn't scroll back to the top after inserting some text;
}
else
{
tagopen = "[" + text + "]";
tagclose = "[/" + text + "]";
var startText = (obj.value).substring(0, start_selection);
var endText = (obj.value).substring(end_selection, obj.textLength);
var selText = (obj.value).substring(start_selection, end_selection);
obj.value = startText + tagopen + selText + tagclose + endText;
//put the cursor at the end of the selection;
obj.selectionStart=end_selection + tagopen.length + tagclose.length;
obj.selectionEnd = end_selection + tagopen.length + tagclose.length;
obj.scrollTop = scrollTop //
}
}
// Internet Explorer
if( obj.createTextRange )
{
selText = document.selection.createRange().text;
obj.focus( obj.caretPos );
obj.caretPos = document.selection.createRange().duplicate();
if (selText.length == 0)
{
if (OpenTag==true)
{
var tag="[" + text + "]";
btnObj.value=btnText + "*";
}
else
{
var tag="[/" + text + "]";
btnObj.value=btnText;
}
document.selection.createRange().text = tag;
}
else
{
var tagOpen="[" + text + "]";
var tagClose="[/" + text + "]";
document.selection.createRange().text = tagOpen + selText + tagClose;
obj.caretPos.moveStart( "character", tagOpen.length + selText.length + tagClose.length);
obj.caretPos.select();
}
}
obj.focus();
}
function bbstyle(btnID)
{
switch (btnID)
{
case 0:
var btn=document.getElementById("bold");
if (btn.value==" B ")
{
SetSelectedText("msgText","b", true, btn, " B ");
}
else
{
SetSelectedText("msgText","b", false, btn, " B ");
}
break;
case 2:
var btn=document.getElementById("underline");
if (btn.value==" U ")
{
SetSelectedText("msgText","u", true, btn, " U ");
}
else
{
SetSelectedText("msgText","u", false, btn, " U ");
}
break;
case 4:
var btn=document.getElementById("italic");
if (btn.value==" I ")
{
SetSelectedText("msgText", "i", true, btn, " I ");
}
else
{
SetSelectedText("msgText","i", false, btn, " I ");
}
break;
case 6:
var btn=document.getElementById("center");
if (btn.value==" Center ")
{
SetSelectedText("msgText", "center", true, btn, " Center ");
}
else
{
SetSelectedText("msgText", "center", false, btn, " Center ");
}
break;
case 8:
var btn=document.getElementById("img");
if (btn.value==" Image ")
{
SetSelectedText("msgText", "img", true, btn, " Image ");
}
else
{
SetSelectedText("msgText", "img", false, btn, " Image ");
}
break;
}
}
function emoticon(text)
{
var obj=document.getElementById("msgText");
if( typeof(obj.selectionStart) != "undefined" )
{
//Mozilla based browser;
obj.focus();
var scrollTop = obj.scrollTop; //To keep the textarea box from scrolling back to the top;
var start_selection = obj.selectionStart;
var end_selection = obj.selectionEnd;
var startText = (obj.value).substring(0, start_selection);
var endText = (obj.value).substring(end_selection, obj.textLength);
obj.value = startText + " " + text + " " + endText;
//Put the cursor where it belongs;
obj.selectionStart = start_selection + text.length + 2;
obj.selectionEnd = start_selection + text.length + 2;
obj.scrollTop = scrollTop //Make it so it doesn't scroll back to the top after inserting some text;
}
if( obj.createTextRange )
{
text = " " + text + " ";
obj.focus(obj.caretPos);
obj.caretPos = document.selection.createRange().duplicate();
document.selection.createRange().text = text;
}
}
</script>
<body>
<form name="frmPost">
<div align=center>
<table border=0 width="50%">
<tr>
<td bgcolor="silver" align="center">Try out teh butonzerz and 5miliez with teh FireFoxz!!!11! (And IE if you like)</td>
</tr>
<tr>
<td align=center>
<input type="button" accesskey="b" name="addbbcode0" value=" B " style="FONT-WEIGHT: bold; WIDTH: 30px" onClick="bbstyle(0)" id="bold">
<input type="button" accesskey="u" name="addbbcode2" value=" U " style="width: 30px; text-align: center;" onClick="bbstyle(2)" id="underline">
<input type="button" accesskey="i" name="addbbcode4" value=" I " style="WIDTH:30px; FONT-STYLE:italic" onClick="bbstyle(4)" id="italic">
<input type="button" accesskey="c" name="addbbcode6" value=" Center " style="FONT-WEIGHT:bold" onClick="bbstyle(6)" id="center">
<input type="button" accesskey="m" name="addbbcode8" value=" Image " style="FONT-WEIGHT:bold" onClick="bbstyle(8)" id="img">
</td>
</tr>
<tr>
<td align=center>
<a href="javascript:emoticon(':D')"><img src="http://rlights.com/forum/smileys/icon_biggrin.gif" border="0" alt=":D" title="Very Happy"></a>
<a href="javascript:emoticon(':)')"><img src="http://rlights.com/forum/smileys/icon_smile.gif" border="0" alt=":)" title="Smile"></a>
<a href="javascript:emoticon(':(')"><img src="http://rlights.com/forum/smileys/icon_sad.gif" border="0" alt=":(" title="Sad"></a>
<a href="javascript:emoticon(':o')"><img src="http://rlights.com/forum/smileys/icon_surprised.gif" border="0" alt=":o" title="Surprised"></a>
<a href="javascript:emoticon(':shock:')"><img src="http://rlights.com/forum/smileys/icon_eek.gif" border="0" alt=":shock:" title="Shocked"></a>
<a href="javascript:emoticon(':?')"><img src="http://rlights.com/forum/smileys/icon_confused.gif" border="0" alt=":?" title="Confused"></a>
<a href="javascript:emoticon('8)')"><img src="http://rlights.com/forum/smileys/icon_cool.gif" border="0" alt="8)" title="Cool"></a>
<a href="javascript:emoticon(':lol:')"><img src="http://rlights.com/forum/smileys/icon_lol.gif" border="0" alt=":lol:" title="Laughing"></a>
<a href="javascript:emoticon(':x')"><img src="http://rlights.com/forum/smileys/icon_mad.gif" border="0" alt=":x" title="Mad"></a>
<a href="javascript:emoticon(':P')"><img src="http://rlights.com/forum/smileys/icon_razz.gif" border="0" alt=":P" title="Razz"></a>
<a href="javascript:emoticon(':red:')"><img src="http://rlights.com/forum/smileys/icon_redface.gif" border="0" alt=":red:" title="Embarassed"></a>
<a href="javascript:emoticon(':cry:')"><img src="http://rlights.com/forum/smileys/icon_cry.gif" border="0" alt=":cry:" title="Crying"></a>
<a href="javascript:emoticon(':evil:')"><img src="http://rlights.com/forum/smileys/icon_evil.gif" border="0" alt=":evil:" title="Evil or Very Mad"></a>
<a href="javascript:emoticon(':twisted:')"><img src="http://rlights.com/forum/smileys/icon_twisted.gif" border="0" alt=":twisted:" title="Twisted Evil"></a>
<a href="javascript:emoticon(':roll:')"><img src="http://rlights.com/forum/smileys/icon_rolleyes.gif" border="0" alt=":roll:" title="Rolling Eyes"></a>
<a href="javascript:emoticon(':wink:')"><img src="http://rlights.com/forum/smileys/icon_wink.gif" border="0" alt=":wink:" title="Wink"></a>
<a href="javascript:emoticon(':!:')"><img src="http://rlights.com/forum/smileys/icon_exclaim.gif" border="0" alt=":!:" title="Exclamation"></a>
<a href="javascript:emoticon(':q')"><img src="http://rlights.com/forum/smileys/icon_question.gif" border="0" alt=":q" title="Question"></a>
<a href="javascript:emoticon(':idea:')"><img src="http://rlights.com/forum/smileys/icon_idea.gif" border="0" alt=":idea:" title="Idea"></a>
<a href="javascript:emoticon(':arrow:')"><img src="http://rlights.com/forum/smileys/icon_arrow.gif" border="0" alt=":arrow:" title="Arrow"></a>
</td>
</tr>
<tr>
<td align=center>
<textarea name="msgText" id="msgText" cols=60 rows=20></textarea>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
I have no idea how it works with Opera and some of the other browsers though.
