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.
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)
20 comentarios:
Hola esta muy bueno, rápido y con muy buen estilo pero lo que si no he podido lograr es que se envié lo que se ha escrito por medio del form. le seguiré intentando pero. Muchas gracias.
Hola, esta muy bueno tu plugin. Pero tengo un problema, como hago para mostrar texto que fue creado previamente con este editor? es decir, si traigo esta información desde una base de datos como hago para mostrarla en el editor correctamente? Intente ponerla entre las etiquetas del TEXTAREA como se haria normalmente pero no funciona... me puedes colaborar? gracias!
Mi mail es gilberto.pineda@gmail.com para culaquiera que sea tu respuesta.
De nuevo yo... aunque llevo poco tiempo con el manejo de JQuery decidi detallar un poco el código de tu plugin para saber si podía resolver mi problema, y fue bastante sencillo. Solo agregue este fragmento en la línea 468: $("#"+id).attr('value')
De esta manera tomo el valor del TEXTAREA y puedo presentar la información en el editor. Adiós y gracias por tu trabajo!
con quitas una de las opciones del editor, por ejemplo alinear y fuentes??
gracias
Muy práctico.
Una cosa, como se hace para deshabilitar la posibilidad de escribir. Parece que el atributo disabled no funciona
?????????
El atributo disable no funciona porque lo que en realidad se hace es reemplazar el textarea por un iframe en modo de edición, asi que no se puede deshabilitar la posibilidad de escribir, quizás para la proxima versión :P
@alfredo para desactivar las opciones de alineacion y fuentes pasa como parametro las opciones font y align en falso.
algo asi:
$(editor).richtext({
align: false,
font: false
});
la opcion de font desactiva tambien el color de las letras, en la proxima version van a ser opciones separadas
Hola tengo un gran problema:
Soy nueva en esto y quisiera saber si alguien me puede decir como hacer para:
1. lo que se escriba con formato me pase a otro textarea en codigo html
2. pasarlo a mi base de datos
3. que lo que extraiga de la base de datos pueda yo mostrarlo en el editor con el formato previamente agregado.
de antemano muchas gracias
Hola, el plugin se encarga de hacer todo lo que necesitas sin necesidad de nada extra, lo que escribas se almacena en el textarea que se transformo en editor enriquecido en formato html directamente, lo puedes guardar en la base de datos sin problemas y para mostrarlo simplemente coloca lo que extraigas de la base de datos como valor del textarea y listo
muchas gracias lo voy a aplicar haber que tal me funciona
como capturar el valor del texto para guardarlo en mi base de datos y como debo recuperarlo para mostrarlo tal como lo guarde
hola como puedo hacer para obtener el valor del text area y guardarlo ya que document.getELementById('n').value no funciona
José Rafael, mil gracias por compartir este código, realmente me ahorraste mucho trabajo. Muy agradecido
Hola José, todavía no he probado el código, pero ya estuve leyendo y creo que me viene de mil maravillas para enriquecer un textarea! Muchas gracias por compartir tu trabajo. Felicitaciones!
José cómo puedo hacer para que el editor únicamente trabaje con negrita, itálica, tamaño de fuente y cuando pegue un determinado texto con formato enriquecido me quede texto plano?.
mmmm que crees mi amigo que utilice el editor para enviar el contenido del textarea por correo electronico y si manda el texto pero no con el formato del editor, como se puede resolver este problema???
lo voy a probar a ver que honda...........
me funciono sin problemas lo unico malo es que accedo con un dispositivo movil al sitio y no funciona?
Como puedo colocar los toolbar, pues no me salen
por si necesitan eliminar algunos elementos del editor, van al archivo jquery.richtxt.js y comentan o eliminan los atributos que no necesiten, estos estan entre las lineas 31 y 46 de dicho archivo. en la variable full_toolbar.
Publicar un comentario