"Todos los días Dios nos da un momento en que es posible cambiar todo lo que nos hace infelices. El instante mágico es el momento en que un sí o un no pueden cambiar toda nuestra existencia. "

Soy una persona apasionada por todo lo que tiene que ver con Internet y las nuevas tecnologías. Soy autodidacta, y me encanta impartir clases...


Textarea enriquecido con Wysiwyg

Sábado 20 de Noviembre de 2010

Javascript
Autor: César Cancino
Categoría: Javascript
Etiquetas Programación, php, mysl
Comentarios 31

Este es un script que nos permitirá implementarle a nuestros formularios la posibilidad de que los usuarios puedan darle un formato HTML a sus post o mensajes. Para eso usaremos un textarea enriquecido con la librería gratuita wysiwyg. Esto nos permitirá aplicarle estilos css a nuestros textarea, por ejemplo negritas, cursivas, itálicas, links, poner imágenes, entre otras cosas.

¿Qué te gustaría compartir con nosotros?

Compartir

Este es un script que nos permitirá implementarle a nuestros formularios la posibilidad de que los usuarios puedan darle un formato HTML a sus post o mensajes. Para eso usaremos un textarea enriquecido con la librería gratuita wysiwyg.
Esto nos permitirá aplicarle estilos css a nuestros textarea, por ejemplo negritas, cursivas, itálicas, links, poner imágenes, entre otras cosas.

A continuación les muestro una sencilla manera de implementarlo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor Wysiwyg</title>
<script language="javascript" src="WYSIWYG/source.js" type="text/javascript"></script>

</head>

<body>

<center>
<div style="width:500px; float:left">
<form name="form" method="post">
<textarea name="texto" cols="35" rows="9"></textarea>
</form>
</div>

</center>
</body>
</html>




31 Comentarios

  1. Ysrael
    Martes 23 de Julio de 2013

    He implementado exitosamente este script y funciona bien pero por defecto aparece debajo del textarea. ¿Es posible ubicar la barra de formato arriba del Textarea?

  2. Alina
    Lunes 28 de Enero de 2013

    Muy buen aporte. De que forma se podrian contar los caracteres para fijar un máximo?? Gracias

  3. Omar Hdez
    Lunes 12 de Noviembre de 2012

    Hola amiga, excelentes codigos, me funcionaron al 100 !! :D gracias, me han funcionado a la perfeccción, lo estoy aplicando para crear un blogger con php y le agrage estos codigos y puff me ha funcionado de maravilla, probado en Mozilla y Google Crhome en sus ultimas versiones. Saludos desde Tlaxcala, Mex.

  4. facundo
    Lunes 03 de Septiembre de 2012

    Soy yo o te falta poner el link de descarga de la libreria? salu2

  5. Diego
    Lunes 16 de Abril de 2012

    Este plugin tiene un problema en IE , y es cuando en la misma pagina tenes mas de un textarea. Toma el contenido del ultimo y lo coloca en todos. Hasta donde vi, el problema esta en el archivo blank.html que carga si el navegador es IE

  6. sergio
    Miércoles 11 de Abril de 2012

    A mi me funciona bien, pero como se podría hacer para hacer el upload de imagenes a mi servidor y no colocar url externa, la idea es que quede en mi servidor en una carpeta para ello. gracias Cesar.

  7. Marc
    Lunes 13 de Febrero de 2012

    Que tal, funciona muy bien para fierefox pero para google chrome 17 tuve que añadir la validación if (rules!=null) { y con eso ya jalo. Saludos

  8. hugoos
    Lunes 30 de Enero de 2012

    muy buen trabajo felicitaciones!

  9. Nery
    Miércoles 11 de Enero de 2012

    Que tal!!! hace tiempo busco un editor, pero que tenga la opcion de insertar video de youtube, alguien que sepa de alguno?

  10. Jitux
    Jueves 24 de Noviembre de 2011

    Hola,esto me funciona bien en mi localhost, pero cuando lo pruebo en el servidor me muestra las listas y los links, pero no lo que está en negrita, ni subrayado, ni cursiva, etc... Lo estoy queriendo levantar con php. Me fijé que me llega así: negrita Falta la palabra bold. Alguien le pasó? Agradecería su ayuda! Saludos

  11. Juan Manuel
    Miércoles 26 de Octubre de 2011

    Buenas noches, excelente tema y sirvió mucho la plantilla, como le puedo hacer para hacer más largo el campo de edición, intente algunas cosas, pero no pude. Otra es, quien es el autor para que le de crédito. Gracias

  12. maadix
    Sábado 22 de Octubre de 2011

    Chavos para los que no encuentran el .js les dejo la liga www.cesarcancino.com/codigos/wysiwyg-editor/WYSIWYG/source.js

  13. Agustin
    Jueves 29 de Septiembre de 2011

    Papelon: El único "pedazo de boludo" eres tú, que no ves el botón que dice Descargar y empieza a echarle la culpa a otros de ser tan ciego. El trabajo que hace César en este post de seguro es mayor al que has echo tú en toda tu vida, ya que se nota que no tienes ni valores, y eres un completo malagradecido, y aunque no sea el autor de este post, por si no te habías dado cuenta es el autor de más de 60 videos de PHP y MySQL.

  14. César
    Miércoles 22 de Junio de 2011

    Buenas tardes Excelente este tema, pero no logro desarrollarlo. No soy experto en JavaScript y hago busqueda de la libreria "source.js" en internet y no la encuentro, así que sí puedes indicarme o enviarme como utilizar te agredeceré. Cordial saludo

  15. papelón
    Martes 14 de Junio de 2011

    no están los archivos para bajar ni nada... si hacés un posteo hacelo bien! referenciá al autor !!! pedazo de boludo!!!

  16. Oscar
    Jueves 12 de Mayo de 2011

    Y para guardar esa informacion en un campo de mi bd, como lo debo dejar?? Es decir, que tipo de campo utilizo?

  17. Maria
    Martes 05 de Abril de 2011

    Hola Cesar gracias por tu aporte interesante la pagina web , desde Uruguay.

  18. matias
    Jueves 24 de Marzo de 2011

    Me diste una idea, gracias :)

  19. Aljor Samel
    Viernes 21 de Enero de 2011

    Estimado Cesar: Soy novato en programación en ASP estoy aprendiendo de los ejemplos he visto el tuyo y me parece genial ero lo que buscaba,para una aplicación que estoy haciendo, puedo utilizar tu nombre dentro de los creditos, y si tienes por ahí como guardar el continodo del texto en un archivo con formato que sea libre de uso un abrazo y te felicito

  20. tHeLaRiOs
    Jueves 23 de Diciembre de 2010

    Hola amigo excelente herramienta , pero me preguntaba si habra alguna forma de insertarle algo para que pueda tener la opción de enviar la información a algún e-mail , salu2

  21. Carlos
    Miércoles 08 de Diciembre de 2010

    Funciona perfectamente en Mozilla, IE, Crome, pero no funciona en Opera. ¿Es necesario configurar el navegador de alguna forma para que funcione? Gracias por todas las aportaciones, me están siendo de mucha utulidad, especialmente las relacionadas con PHP.

  22. Jefri
    Sábado 20 de Noviembre de 2010

    Interesante muy bueno.

  23. R. Dux
    Sábado 20 de Noviembre de 2010

    Hace tiempo que busco un editor para los text area, y este es el que mejor relación simpleza/resultado ofrece. Gracias, César. Como siempre, ofreciendo ayuda y recursos a los que empezamos...

  24. Daniel
    Sábado 20 de Noviembre de 2010

    Bastante bueno, llevo un tiempo buscando un editor Wysiwyg pero no había encontrado alguno bueno a mi parecer, y este ya lo probe y me funciona como quiero. Gracias, César, por la ayuda con estos recurso. Un saludo.

  25. Vinnie
    Miércoles 24 de Noviembre de 2010

    /** * * Editor WYSIWYG v1.0 RC3 * * Este script convertira todos tus textareas en * editores WYSIWYG (What You See Is What You Get) * Un editor WYSIWYG permite al usuario escribir * textos con estilos de una manera practica y sencilla. * Funciona tanto en IE como en FireFox * * Este script ha sido desarrollado integramente * por Iv�n Arias (arias@elleondeoro.com) * * Vista www.php-hispano.net y #php_para_torpes (iRC-Hispano) * */ Un buen colega siempre cita la fuente :)

  26. Roger
    Miércoles 24 de Noviembre de 2010

    hola cesar gracias por tus aportes en materia de recursos web queria hacer una acotacion, en este codigo hay que copiar o subir una carpeta que contenga las imagenes del editor enriquecido Gracias

  27. Antonio
    Domingo 21 de Noviembre de 2010

    Gracias Cesar es muy simple de usar en comparación de todos los que he visto. Gracias de nuevo por tu trabajo

  28. destruccion-x-
    Domingo 21 de Noviembre de 2010

    gracias cesar por tus buenos aportes necesitaba un editor simple ya que los que tengo tienen muchas funciones y algunas de ellas estaban demas, un saludo maestro y gracias por compartir tus conocimientos y aportes con la comunidad se te agradece enormemente

  29. Alberto
    Domingo 21 de Noviembre de 2010

    Muy bonito, pero será que lo hago mal pero no le veo utilidad ninguna darle formato si no lo puedo salvar. Es decir, si lo envio por un formulario a mostrar.php y alli pongo el codigo "" me muestra el texto pero no el formato, por lo que si luego quiero reproducirlo, es como si hubiera usado un textarea, menos bonito pero igualmente efectivo...de que sirbe darle formato a un texto que va a quedar plano. Si lo hago mal indíquenme como salvar el formato, me sería muy útil.

  30. Alberto
    Domingo 21 de Noviembre de 2010

    Perdón por el comentario de antes, ahora creo que entendí como funciona...al textarea le puse la id="sms" y puse un botón con un onclick="alerta();"...la función alerta es la siguiente: function alerta(){ var mensaje = document.getElementById("sms").value; alert(mensaje); } y si, ahora me muestra el estilo css..PERFECTO...ahora puedo poner un formulario con un campo oculto para guardar el valor de la variable de javascript mensaje en php y guardarlo en mi base de datos :) Un saludo.

  31. Alberto
    Domingo 21 de Noviembre de 2010

    Nada, no hay forma, cada vez que paso el valor de javascript a un campo php pierde el formato, he probado a hacer funciones de replace pero no consigo mantener los estilos css. Si a alguiens e le ocurre cómo hacer para que lo que muestra el alert..."a" llege a php sin alterarlo(a mi me guarda solo "a") que avise. Un saludo y gracias.