Como puedo hacer esto

[Reynier]

Lo que quiero hacer es un textarea personalizable tal como lo traen los Foros de Discusión. Es decir, que el usuario pueda aplicar negritas, cursivas, subrayado a los textos. He logrado algo con algún código que me encontré en Internet. Pues bien lo que me pasa es que no logro aplicarle el estilo al texto que tengo seleccionado dentro del textarea. Este es el código que uso para entrar las cosas:

Código:

function storeCaret(text) {
 if (text.createTextRange) {
  text.caretPos = document.selection.createRange().duplicate();
 }
}

function meter(text) {
 var postopic = document.posting.mensaje;
 if (postopic.createTextRange && postopic.caretPos) {
  var caretPos = postopic.caretPos;
  caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
  text + ' ' : text;
 }else
   postopic.value += text;
   postopic.focus(caretPos)
 }

function BBCode(accion){
 switch(accion){
  case "negrita": //Texto en negritas
   negras = prompt("Texto en Negritas","");
   if(negras){
    negras="[ b ] "+negras+" [ /b ]";
    meter(negras);
   }
  break;
  case "cursiva": //Texto en cursiva
   italica = prompt("Texto en Cursiva", "");
   if(italica) {
    italica="[ i ] "+ italica +" [ /i ]";
    meter(italica);
   }
  break;
  case "subrayado": //Texto subrayado
   subrayado = prompt("Texto Subrayado", "");
   if(subrayado) {
    subrayado="[ u ] "+subrayado+" [ /u ]";
    meter(subrayado);
   }
  break;
  case "derecha":
   right = "[ align=right ]  [ /right ]";
   meter(right);
  break;
  case "centrado":
   center = "[ align=center ]  [ /center ]";
   meter(center);
  break;
  case "izquierda":
   left = "[ align=left ]  [ /left ]";
   meter(left);
  break;
  case "justificado":
   justify="[ align=justify ]  [ /justify ]";
   meter(justify);
  break;
  case "cita":
   cita = prompt("Citar","");
   cita = "[ cita ] "+cita+" [ /cita ]";
   meter(cita);
  break;
  case "codigo":
   code = prompt("Código","");
   code="[ codigo ] "+code+" [ /codigo ]";
   meter(code);
  break;
  case "php":
   php = prompt("Código PHP","");
   php="[ php ]<?php "+php+" ?>[ /php ]";
   meter(php);
  break;
  case "image":
   image = prompt("URL de la imagen", "http://");
   if(image) {
    image="[ urlimage="+image+" ] "+image+" [ /urlimage ]";
    meter(image);
     }
  break;
  case "url":
   url = prompt("URL del Sitio", "http://");
   if(url) {
    url="[ url="+url+" ] "+url+" [ /url ]";
    meter(url);
     }
  break;
  case "colorfuente":
   selectcolor = document.all['color'];
   color = selectcolor.options[selectcolor.selectedIndex].value;
   colorfuente = "[fontcolor="+color+"] [/fontcolor]";
   meter(colorfuente);
  break;
  case "tamanofuente":
   selectsize = document.all['size'];
   size = selectsize.options[selectsize.selectedIndex].value;
   tamano = "[fontsize="+size+"] [/fontsize]";
   meter(tamano);
  break;
  case "tipofuente":
   selecttype = document.all['type'];
   type = selecttype.options[selecttype.selectedIndex].value;
   tipo = "[fonttype="+type+"] [/fonttype]";
   meter(tipo);
  break;
  default:
    meter(accion);
  break;
  }
 }

pero por ejemplo si marco un texto y hago click en tipodefuente debia salirme esto:

[fonttype = tahoma ]texto seleccionado[ /fonttype ]

pero me sale esto otro:

texto seleccionado [fonttype = tahoma ] [ /fonttype ]

de igual forma si marco un texto y quisiera aplicarle por ejemplo fuente diferente a la del otro debia salirme:
[ modificador ] texto seleccionado [ /cierredemodificador ]
y nada
me pueden dar una ayuda a ver que pasa.

Salu2