En esta ocasión voy a enseñarles como crear un Toolbar para insertar etiquetas de formato, en un textarea, al mejor estilo “editor de wordpress”. Esta técnica también se usa mucho en foros con etiquetas bbcode, cuando se necesita un rich text editor simple, y no tienes tiempo para complicarte la vida.

Demostración

El mejor ejemplo que podrán conseguir lo pueden ver en esta misma página, en la parte Dejar un comentario. Pueden encontrar otro ejemplo igual de bueno en la página de Alex King.

Paso 1 -Conseguir los materiales

El script que nos va a salvar se llama js-quicktags creado por Alex King y usado en el mismísimo WordPress.

Este script crea automáticamente los botones y les asigna las funciones de formato. Válido para todos los navegadores decentes. Descuiden, también funciona en Internet Explorer.

Paso 2 -Entendiendo el código

Una vez descargado podemos ver en el código algo parecido a esto:

edButtons.push(
	new edButton(
		'ed_bold'
		,'Negrita'
		,'<strong>'
		,'</strong>'
		,'b'
	)
);
edButtons.push(
	etc etc etc
)

¿Interesante verdad? Podemos ver que crear un botón es realmente muy fácil. Pero para no romper nada, veamos que significa cada parte:

edButton(id, display, tagStart, tagEnd, access, open)

edButtons.push(
	new edButton(
		'id'
		,'Texto del boton'
		,'<etiqueta>'
		,'</etiqueta>'
		,'tecla de acceso' /* No se usa en realidad */
	)
);

Gracias a la licencia LGPL de js-quicktags podremos modificarlo a nuestro gusto, agregando nuevos botones o eliminando los existentes. Fácilmente podríamos transformar el código HTML de los botones a BBCODE. Solo es cuestión de meterle mano

Paso 3 -Adaptando

En el ejemplo que descargamos, hay muchas cosas que no necesitamos, por ejemplo, la parte de las tablas y títulos. Si queremos borrar el botón, borramos el pedazo de código que lo crea

/* Borramos este pedazo para eliminar el botón
edButtons.push(
	new edButton(
		'ed_table'
		,'TABLE'
		,'<table>\n<tbody>'
		,'</tbody>\n</table>\n'
	)
);
*/

En este blog hay unos botones para crear código fuente en PHP. Esta es la manera de hacerlo:

edButtons.push(
	new edButton(
		'ed_php'
		,'PHP'
		,'[php]'
		,'[/php]\n\n'
		,''
	)
);

¿Cuantos ejemplos más quieres? Creo que ya entendiste ¿verdad que es muy fácil?

Paso 4 -Usando el script

La parte obvia, en la cabecera de nuestra página:

<script src="js_quicktags.js" type="text/javascript"></script>

Y para adjuntar los botones al textarea, simplemente le pasamos el ID del textarea a la función edToolbar.

<script type="text/javascript">edToolbar('comment');</script>
<textarea id="comment" rows="20" cols="50"></textarea>

Paso 5 -CSS

Este paso es opcional. Si queremos agregar estilos a los botones para que no se vean tan windows, podemos agregar un css a nuestra página parecido a este:
Nota: Es #ed_toolbar_NOMBRE_DEL_TEXTAREA pero en nuestro ejemplo, el textarea se llama comment.

#ed_toolbar_comment input{
  background:#EDEDE1 none repeat scroll 0 0;
  border:1px solid #8FB325;
  margin:3px 3px;

  font-family:Arial,Verdana,SunSans-Regular,Sans-Serif;
  font-size:13px;
  font-weight:bold;
  color:#00B0D8;

  cursor: pointer;
}

#ed_toolbar_comment input:hover{
  color:#8FB325;
}

¿Verdad que fue muy fácil? Ahora los visitantes que no sepan HTML podrán formatear sus comentarios con unos simples clicks