22 de junio de 2009

Editor de texto enriquecido con jQuery


EDIT 2
Ya desarrollé una nueva versión del plugin, prácticamente desarrollé todo desde cero, está alojado en la misma página de google code.

EDIT
Creé un proyecto en googlecode, ahí explico como usar el plugin con más detalle, la dirección es http://code.google.com/p/jrichtext/


No es nada nuevo y se pueden conseguir millones en internet, pero haciendo este pequeño plugin para jquery aprendí como funcionan esos editores WYSIWYG que andan rodando por ahí.

Pues este plugin lo que permite es convertir los textarea (o cualquier otro elemento, pero funciona mejor con textareas) en un editor de texto enriquecido con las funciones básicas de edición: negrita, subrayado, listas, color, resaltado, fuente, etc.

Implementación

Después de descargar el .zip, deben editar el archivo estilo.css para corregir las direcciones de las imágenes y los colores para que correspondan a los que ustedes deseen.

Después basta con agregar el archivo css y el archivo de javascript a su archivo HTML.


<link href="css/estilo.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/jquery.richtext.js"></script>


Para invocar el plugin solo basta con llamar al método richText().


$("textarea").richText();


Como no me quiero robar el crédito de nadie, el selector de colores hace uso del plugin ColorPicker creado por Stefan Petre (www.eyecon.ro)

El plugin está creado bajo la licencia GPL, así que pueden hacerle cambios si lo consideran
necesario (aunque sería bueno que comentaran cuales son los errores/bug/mejoras que tiene el código)