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

Jesús Pardo says:

Hola que tal,
muy interesante el post, lo malo es que no pude descargar el archivo de js-quicktags, ya que el link parece estar roto,
porfavor si pudieran pasarme el link correcto o un lugar donde lo pueda descargar?
Gracias

Eduardo says:

Hola Jesús: El link no está roto, lo puedes descargar desde aquí.

Saludos!

Este comentario te ha servido? y colabora con el blog
Reply
NekroJoey says:

ola si esta muy lindo y creo q puedo llegar a entenderlo.

yo en realidad buscaba un combo box con lista de colores simples y otro con formatos comunes…. =P pero esto me va a servir igual

NekroJoey says:

me sirvio de mucho!!! gracias estaba muy facil y simple de entender

123 says:

hi am srinivas pitani.

Jesús says:

Estaba preguntándome como podía dejar un comentario en un blog con todas las cualidades de formato de texto y me encuentro con ésto… pero claro, esta posibilidad no depende del comentarista sino del autor del blog, ¿noooooo?
Coño, perdon, si veo mi texto real arriba según lo escribo aquí abajo. Y el colorcito de las letras..?

Oscar says:

Hola

God says:
esto es &lt;html&gt; y puedo escribir &lt;br&gt;
y php tambien!! :D  &lt;?php $love = &quot;Love();&quot;; echo $love ?&gt;

negrasok

blockqote carnal ;D

Hola, muchas gracias por el articulo. Siempre es util este clase de información. Te añado a mi lista de favoritos. Gracias y un saludo.

roger says:

voy a tratar de provar todas las etiquetas para que las personas puedan ver su funcionamiento

etiqueta strong

etiqueta em

etiqueta link

etiqueta cite

etiqueta close tags “creo que esta no sirve”

etiqueta code:

php

&lt;php?
$mivariable
?&gt;

css

#capa { background-color: #ff0000 }
henry says:

sos un genio tio claro que queiro agregar videos ya vere la manera pero el codigo es muy util

adalberto says:

adalberto