http://martin.com.uy/wp-content/themes/martinuy2/live/proxy.php?url_especifica=
0
2
Mar
2012

Insertar tags html en textarea con jQuery y Javascript

insertar tags en textarea

Al diseñar un espacio dentro de una web en el que el usuario deba ingresar una cantidad media o alta de texto (cuadro de texto o textarea), debemos darle la posibilidad de insertar tags html, bbcode, etc. utilizando botones.

Nos referimos por ejemplo a un cuadro de texto para escribir un artículo en un blog, escribir un mensaje en un foro o enviar un mail. El impacto de usabilidad que se logra es muy alto.

A su vez, existen dos modalidades para la inserción de tags:

  • Insertar un tag en el lugar en que está posicionado el cursor –tag de apertura o cierre según corresponda-, o
  • Seleccionar un fragmento del texto e insertar el tag de forma envolvente.

El editor más popular y completo que conozco para lograr esto es TinyMCE. Sin embargo, en algunas ocasiones podemos necesitar algo más liviano o personalizable, donde tener mayor control funcional y de diseño.

Voy a compartir con ustedes un sencillo código que desarrollé para el sitio Live! implementando esta funcionalidad. Utilizo Javascript, con dos funciones tomadas de los sitios http://motyar.blogspot.com y http://blog.vishalon.net según se encuentra documentado en el mismo código. El uso de jQuery es circunstancial, podría sustituirse sin mayores complicaciones por Javascript puro.

Screenshot:
insertar tags html en textarea con javascript y jquery

Descargar código v.0.1

Demo de ejemplo

Aprecio cualquier comentario 🙂

28
Jul
2012
paco

lo unico malo es que no funciona para firefox al querer agregar tags en texto seleccionado :/

28
Jul
2012
paco

en esta pagina esta una solucion por si a alguien la necesita:

http://forums.mozillazine.org/viewtopic.php?f=25&t=2268557

Escribir un comentario