Foros del Web » Creando para Internet » HTML »

Textarea con formato

Estas en el tema de Textarea con formato en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/03/2005, 04:39
Avatar de kesthers  
Fecha de Ingreso: mayo-2004
Ubicación: Valencia
Mensajes: 358
Antigüedad: 13 años, 6 meses
Puntos: 2
Textarea con formato

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
  #2 (permalink)  
Antiguo 03/03/2005, 05:59
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
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
__________________
Esteban Quintana
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:15.