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

Good day! This is my first comment here so I just wanted to give a quick shout out and tell you I genuinely
enjoy reading through your articles. Can you suggest any other
blogs/websites/forums that go over the same subjects?
Appreciate it!

This post will help the internet viewers for creating new weblog or even a weblog from start
to end.

Your Flowers vs Zombies 2 Hack v3 gives you to unlock all look goods what exactly are you waiting for?

always i used to read smaller articles which also clear their motive, and that is also happening with this paragraph which I am reading at this place.

It is in point of fact a nice and useful piece of information. I’m satisfied that
you simply shared this useful info with us.
Please stay us informed like this. Thanks for
sharing.

It’s really very difficult in this full of activity life
to listen news on Television, thus I simply use internet for
that reason, and obtain the most up-to-date news.

Yes! Finally someone writes about industry source magazine.

yoga teacher says:

I’m gone to convey my little brother, that he should also pay
a visit this website on regular basis to obtain updated from newest news update.

Ecigs would someday replace tobacco-type cigarettes.
The electronic cigarette is making the new generation of smoking popular all over the world.
Pen Preference E-Cigarettes-140mm – 160mm: These are the real style of e-cigarettes offered by Chinese a restricted years ago.

system runs says:

No matter if some one searches for his vital thing, so he/she wants to be available that in detail,
so that thing is maintained over here.

Spot on with this write-up, I truly feel this web site needs
a lot more attention. I’ll probably be back again to read more, thanks for the
info!

dell battery says:

Hi it’s me, I am also visiting this site on a regular basis,
this web site is in fact nice and the people are really sharing good thoughts.

Write more, thats all I have to say. Literally, it seems as
though you relied on the video to make your point. You clearly know what youre talking about, why waste your intelligence on just posting videos to your blog when you
could be giving us something informative to read?

The study noticeable a huge difference in the total quantity of nicotine levels
present vis-a vis detailed on an smokeless cigarette packet.

Electronic cigarette’s seem to be the wave of the future
concerning new ways of delivering the satisfying dose of nicotine in a safe and less harmful manner.
About two weeks after my amazing transformation from near pack-a-day
smoker to smoking electronic cigarettes, the 3-piece was
turning into a piece of you know what.

Hey! This post could not be written any better! Reading this
post reminds me of my good old room mate!
He always kept talking about this. I will forward this write-up to him.
Pretty sure he will have a good read. Many thanks for sharing!