Prova questo (l'ho fatto parecchi mesi fa...)
Puoi selezionare una parte del testo e cliccare su un pulsante o puoi direttamente cliccare il pulsante e questo ti indica con un * che il tag è aperto.

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
var stTxt1  = true;
var stTxt2  = true;
var stTxt10 = true;
var stTxt20 = true;

btnStatus        = new Array(true,false);
btnStatus[true]  = '*';
btnStatus[false] = ' ';

bold          = new Array(true,false);
bold[true]    = '';
bold[false]   = '';

italic        = new Array(true,false);
italic[true]  = '';
italic[false] = '';

function Aggiungi(button,textarea,formattazione, status) {

 selectedText = document.selection.createRange().text;
 if (selectedText) {
   document.selection.createRange().text = formattazione[true] + selectedText + formattazione[false];
	 document.selection.empty()
  return status;
 } // if (selectedText)
 
 textarea.value += formattazione[status];
 if (! status) {
  ch = ' ';
  re = /\*/i
 } else {
  ch = '*'; 
  re = / /i
 }
 button.value    =  button.value.replace(re, ch);
 return ! status;
}
//-->
</script>

<title>Untitled</title>
</head>
<body>
<textarea name="tx1" rows="10" cols="50"></textarea>


<input type="button" name="b1" value="   G " onclick="stTxt1=Aggiungi(this,tx1,bold,stTxt1);">
<input type="button" name="b1" value="   I " onclick="stTxt10=Aggiungi(this,tx1,italic,stTxt10);">



<textarea name="tx2" rows="10" cols="50"></textarea>


<input type="button" name="b2" value="   G " onclick="stTxt2=Aggiungi(this,tx2,bold,stTxt2);">
<input type="button" name="b2" value="   I " onclick="stTxt20=Aggiungi(this,tx2,italic,stTxt20);">

</body>
</html>