Crear un Toolbar para formatear texto en un TextArea

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 :)

If you want to increase your experience simply keep visiting this website and be updated with the hottest news update posted here.

dog sombrero says:

What i do not realize is if truth be told how you are not actuallyy much more well-preferred than you might be now.
You’re so intelligent. You realize thus considerably in terms of
tuis matter, produced me in my view consider it from numerous numerous angles.
Its lioke men and women are noot fascinated unless it’s one thing to do with Woman gaga!
Your personal stuffs outstanding. All thhe time cae for it up!

This is the perfect site for anyone who wants to find out about this topic.
You realize a whole lot its almost hard to argue with you (not
that I personally would want to…HaHa). You certainly put a fresh spin on a
subject which has been discussed for years.

Excellent stuff, just excellent!