Textarea con formato

[kesthers]

Hola me gustaría hacer un textarea parecido al que usan en Hotmail o en estos foros.

Por si no saben lo que les digo, les dejo esta imagen:


Alguien me puede decir como se puede hacer esto?

Muchas gracias

[monoswim]

Yo estoy construyendo uno a base de un script que me dió Caricatos...Acá te paso el código...

Código:

<script language="JavaScript" src="/librerias/editor.js"></script>
<script type="text/javascript" >
   var elEditor; // declaración necesaria...
</script>
Formulario para agregar un Art&iacute;culo a la categor&iacute;a <!--msws_template type="var" name="categoria" value="Categoria"--><br>
<br>
<form method="post" action="index.pl">
                 
  <p>
    <input type="hidden" name="action" value="save_new_articulo"><input type="hidden" name="categoria" value="<!--msws_template type="var" name="categoria" value="Categoria"-->
    "> <span class="css_articulo_form_item_name">Titulo:</span><br>
    <input type="text" name="titulo">
    <br>
    <br>
    <span class="css_articulo_form_item_name">Descripción:</span><br>
    <textarea name="description" rows="3" cols="40"></textarea>
    <br>
    <br>
    <span class="css_articulo_form_item_name">texto:</span><br>
    <textarea name="texto" rows="10" cols="45"></textarea>
  </p>
  <table width="85%" border="1" cellspacing="3" bordercolor="#CCCCCC">
    <tr> 
      <td><input type="button" name="Button" value="Negrita" onClick="_insertar(elEditor, '' + prompt('Texto a colocar en Negrita', _lector()) + '');"> 
        <input type="button" name="Button" value="Cusriva" onClick="_insertar(elEditor, '' + prompt('Texto a colocar en Itálica', _lector()) + '');"> 
        <input type="button" name="Button" value="Tachado" onClick="_insertar(elEditor, '' + prompt('Texto a colocar en Tachado', _lector()) + '');"> 
        <input type="button" name="Button" value="Subrayado" onClick="_insertar(elEditor, '' + prompt('Texto a colocar en Subrayado', _lector()) + '');"> 
        <select name="color" onChange="_insertar(elEditor, '[color=#' + this.value + ']' + prompt('Texto a colocar en Color', _lector()) + '[/color]');">
          <option value="000000" selected>Color</option>
          <option value="000000">Negro</option>
          <option value="006699">Azul</option>
          <option value="CCCCCC">Gris</option>
        </select> <select name="size" id="size" onChange="_insertar(elEditor, '[size=' + this.value + ']' + prompt('Texto a colocar en el Tamaño especificado', _lector()) + '[/size]');">
          <option value="2" selected>size</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select> <input type="button" name="Button2" value="Hiperv&iacute;nculo" onClick="_insertar(elEditor, '' + prompt('Texto a mostrar en el Hipervínculo', _lector()) + '');"> 
        <input type="button" name="Button22" value="Imagen" onClick="_insertar(elEditor, '[img=' + prompt('Indique URL de la imagen','http://') + '~' + prompt('Alineación de la imagen','right') + ']');"></td>
    </tr>
  </table>
  <p> 
    <input type="submit" value="Agregar Artículo">
    <input type="reset" value="Borrar Formulario">
  </p>
</form>

y el editor.js (el archvo de Caricatos es)

Código:

var _navegador = navigator.userAgent;
var ie = /msi/i.test(_navegador);
var op = /opera/i.test(_navegador);
var mo = /gecko/i.test(_navegador);
var otro = !(ie || mo);
var _insertor, _insertar, _formulario, _texto, _lector = "";

function datos_ie() {
	_texto = document.selection.createRange().text;
	if (_formulario.createTextRange)
		_formulario.posi = document.selection.createRange().duplicate();
	return true;
}

function captura_ie()	{
	return _texto;
}

function captura_mo() {
	with (_formulario) return value.substring(selectionStart, selectionEnd);
}

function captura_otro()	{
	return "";
}

function poner_mo(f, x)	{
	var Start = f.selectionStart;
	var End = f.selectionEnd;
	var inicio = f.value.substr(0, Start);
	var fin = f.value.substr(End, f.value.length);
	f.value = inicio + x + fin;
	if (Start == End)	{
		f.selectionStart = inicio.length + x.length;
		f.selectionEnd = f.selectionStart;
	}
	else	{
		f.selectionStart = inicio.length;
		f.selectionEnd = inicio.length + x.length;
	}
	f.focus();
}

function poner_otro(f, x)	{// opera u otros navegadores desconocidos
	f.value += x;
	f.focus();
}

function poner_ie(f, x)	{
	f.focus();
	if (f.createTextRange)	{// && f.posi)	{
		if (!f.posi)	datos_ie();
		with(f)	{
			var actuar = (posi.text == "");
			posi.text = x;
			if (!actuar)
				posi.moveStart("character", -x.length);
			posi.select();
		}
	}
}

function ini_editor(formu)	{
	_formulario = formu;
	if (mo)	{
		_insertar = function(f, x) {poner_mo(f, x);};
		_lector = captura_mo;
	}

	if (otro)	{
		_insertar = function(f, x) {poner_otro(f, x);};
		_lector = captura_otro;
	}

	if (ie)	{
		_formulario.onchange = datos_ie;
		_formulario.onclick  = datos_ie;
		_insertar = function(f, x) {poner_ie(f, x);};
		_lector = captura_ie;
	}
	return formu;
}

Espero que te sirva y si alguien tiene uno ya terminado que nos lo comparta !!!

Saludos