13.9.10

Convertir un TextArea en un completo editor de Texto Enriquecido



Si tienes una pagina web un poco avanzada, sabrás lo útil que puede llegar a ser que un textarea de un formulario se convierta en un completo editor de texto para así almacenar la información con formato y esto es muy fácil de hacer gracias a NicEdit, mediante su código que puedes agregarlo de manera muy fácil muy parecido un gadget sin descargar ningún programa al servidor (aunque también te permite esta opción)

Pruébalo: 



Código:
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

Este código lo puedes agregar en cualquier parte de tu pagina y convertirá todas las áreas de texto en unos minieditores con mucha calidad.

Ahora, si quieres que solo uno o algunos tengan esta opción y no todos, o si quieres configurar los botones mira este codigo:

<script src="http://js.nicedit.com/nicEdit-latest.js"
type="text/javascript"> </script>
<script type="text/javascript">bkLib.onDomLoaded(function() { new
nicEditor().panelInstance('texcontenido'); });
</script>

1.-En donde panelInstance contiene el nombre de tu textarea
2.-En el parentesis de new niceditor puedes poner el listado de botones que quieres que aparezcan por ejemplo: 
new niceditor({buttonList : ['fontSize', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'html', 'image']}).panelInstance('texcontenido')


Y listo tienes tu editor de texto personalizable para tu pagina web en menos de 5 minutos.

ACTUALIZACIÓN:

Mi error, lo siento con todos los programadores que se guiaron en este post, se me olvidaba darles el comando que le deben dar por JavaScript antes de guardar en la base de datos o para cualquier fin, deben hacer una función,

por ejemplo:

 function Ok()
{ nicEditors.findEditor('textarea').saveContent(); }

después de correrla toman el valor del parámetro, como cualquier otro campo que se envía por el Post o el Get de un formulario.

ACTUALIZACIÓN II


Debí explicarme un poco más: antes de enviar los datos, para ser guardados con formato, deben cargar el TextArea justo antes de hacer el "Submit" del formulario:

<script src="http://js.nicedit.com/nicEdit-latest.js"
type="text/javascript"> </script>
<script type="text/javascript">bkLib.onDomLoaded(function() { new
nicEditor().panelInstance('textarea1'); });
</script>
.
.
.
<script languaje="javascript">
function Ok()
{
nicEditors.findEditor('textarea1').saveContent();
document.formname.submit();
}
</script>
.
.
.
<form name="formname" action="pagqueguarda.php">
<textarea name="textarea1"> </textarea>
<input type="button" onClick = "Ok();">
</form>

Saludos,




Si te gusto el contenido no Olvides Comentar y Compartir



43 comentarios:

  1. no olvides decir que lo viste en http://trucosw3.blogspot.com

    ResponderEliminar
  2. Al pasarlo por un formulario e insertar el texto del textarea en una base de datos mysql, ¿Guarda las propiedades de edición al realizar una consulta del texto guardado?.. Agradezco tu respuesta! Saludos!

    ResponderEliminar
    Respuestas
    1. Almacena en formato html....

      Mi error, lo siento con todos, se me olvidaba darles el comando que le deben dar por JavaScript antes de guardar en la base de Datos

      deben hacer una función, por ejemplo:

      function Ok()
      {
      nicEditors.findEditor('textarea').saveContent();

      }

      Eliminar
  3. si yo tengo un blog, y quiero que el usuario pueda insertar imagenes que se encuentran dentro de su computadora dentro del text area. como ago para guardar las imagenes en el servidor?
    agradesco su respuesta

    ResponderEliminar
    Respuestas
    1. Almacena en formato html, por lo cual guardara el link, pero el te da la opción de que la subas a un servidor de imágenes y subas el link....

      Mi error, lo siento con todos, se me olvidaba darles el comando que le deben dar por JavaScript antes de guardar en la base de Datos

      deben hacer una función, por ejemplo:

      function Ok()
      {
      nicEditors.findEditor('textarea').saveContent();

      }

      Eliminar
  4. Es justo lo que estaba buscando, lo voy a probar.

    ResponderEliminar
  5. Mi error, lo siento con todos, se me olvidaba darles el comando que le deben dar por JavaScript antes de guardar en la base de Datos

    deben hacer una función, por ejemplo:

    function Ok()
    {
    nicEditors.findEditor('textarea').saveContent();
    }

    ResponderEliminar
  6. Hola, perdon por mi ignorancia, me podrian poner el codigo del formulario? no se como poner la funcion ok que mencionas, ni donde ponerla ni nada, quiero hacer un formulario (con php) y que los datos los guarde en mysql.

    MUCHAS GRACIAS

    ResponderEliminar
  7. Nada , incapaz, por mas que miro no veo como hacerlo!. Un ejemplo completo porfaaaaaaaaaaaaa :)

    Lo agradezco de corazón

    ResponderEliminar
  8. Hola! Quiero incluir este código en un php cargado vía jquery con .load(). Pero no funciona! Tienen alguna idea de cómo hacerlo funcionar??

    Desde ya, muchas gracias!!

    ResponderEliminar
  9. Muchisimas gracias!! me ha sido de gran ayuda!! mil gracias de verdad, buen trabajo.

    ResponderEliminar
  10. holaaa muy bueno pero no logro con la funcion para guardar los cambios! no logro entender donde tengo que agregar la funcion, me imagino que en el archivo JS, pero lo hago y no funciona!!!! muchas gracoas!

    ResponderEliminar
  11. Respuestas
    1. Este editor esta muy bueno (Y), gracias por postearlo!!! Sin embargo hay el siguiente inconveniente.

      Parece que si a algunos no les funciona bien, es por el navegador... Copié el codigo y lo ejecuté en Chrome y no funcionó, pero en IE si funcionó.

      Lo raro es que el editor que esta de ejemplo en esta pagina si funciona, a pesar que estoy probándolo con Chrome...

      Tal vez hay algo más que agregar para que el código (Actualizacion II) funcione en los principales navegadores



      Eliminar
  12. Gracias maestro. Me salvaste la vida con el código ACTUALIZACION II!!!

    ResponderEliminar
  13. Amigo!... si no le pones el mismo id que el nombre del nombre del textarea no funciona de forma individual, por lo menos en chrome..


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Textarea Enrriquecido</title>

    </head>

    <script src="http://js.nicedit.com/nicEdit-latest.js"

    type="text/javascript"> </script>

    <script type="text/javascript">bkLib.onDomLoaded(function() { new

    nicEditor().panelInstance('textarea1'); });

    </script>
    <script languaje="javascript">

    function Ok()

    {

    nicEditors.findEditor('textarea1').saveContent();

    document.formname.submit();

    }

    </script>
    <body>

    <form name="formname" action="pagqueguarda.php">

    <textarea id="textarea1" name="textarea1" > </textarea> <br/><br/>

    <textarea name="textarea2"> </textarea><br/><br/>

    <input type="button" onClick = "Ok();">

    </form>

    </body>

    </html>



    Asi me funciona perfecto

    ResponderEliminar
  14. Hola buenas, como estas?
    Perfecto el codigo, pero tengo un problema, te explico,
    tengo mas de un campo para subir, el codigo que aca pones me sube uno solo, me podrias hechar una mano con esto,
    Agradecido

    ResponderEliminar
    Respuestas
    1. solo es agregar dentro de form los demas campos y cada uno con su name para que al pasarlos por POST puedas guardar las variables de cada campo y listo.

      Eliminar
  15. solo es agregar dentro de form los demas campos y cada uno con su name para que al pasarlos por POST puedas guardar las variables de cada campo y listo.

    ResponderEliminar
  16. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  17. ¿Y qué pasa con las imágenes?¿se guardan en el servidor o se pierden?
    Necesito que cuando llame la información desde la base de datos me devuelva hasta las imágenes en php!!!

    ResponderEliminar
  18. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  19. FUCIOAN TODO OK. AL 100%

    aTTE mASIEL

    ResponderEliminar
  20. A mi me funciona todo correcto excepto los links. Cuando añado un link me lo toma pero le añade la url dónde se ubica la página con el textarea delente, así:

    http://www.pepperline.com/img/img_noticies/\"http://www.nudiejeans.com/productionguide/\"

    ¿que puede ser?

    ResponderEliminar
  21. amigo stoy utilizando su opcion para el texarea pero no me funciona cuando envio datos al textarea de un campo cualquiera me sale enblanco

    utilizo php

    es como para editar el campo que cargo en el textarea

    ResponderEliminar
  22. No pudo ser mejor este post...
    importante colocarle al textarea el id igual al nombre como indica guillermo sevilla del resto alusinante

    ResponderEliminar
  23. no me funciona dentro de un div que esta display:none :( ayudaaaaa!!

    ResponderEliminar
  24. Hola que tal. Primero muchas gracias por compartirlo, de entrada se ve bastante bien y yo también es lo que estoy buscando para una actividad. Tengo una pregunta: Explicas y creo que de forma muy clara como debe salvarse el contenido, pero ¿cómo se puede recuperar?, suponiendo que se salvará en una BD MySQL, en un campo de tipo "TEXT", quiero pensar que al momento de recuperar ese valor para que un usuario pueda modificar su texto, se recupera como cualquier valor de una BD y se coloca el valor recuperado en el TextArea correspondiente. Posteriomente para hacer el UPDATE en la BD, el valor se pasa de la misma manera con la función que hace el submit() de JavaScript. ¿Esto es correcto?
    Muchas gracias de antemano.
    Saludos.

    ResponderEliminar
  25. y que pasa si el usuario dibuja una tabla? como se guarda es información en la bd?

    ResponderEliminar
  26. Hola buen posto pero como tomas el valor del textarea para alamacenarlo a la base de datos???

    ResponderEliminar
  27. Hola buen posto pero como tomas el valor del textarea para alamacenarlo a la base de datos???

    ResponderEliminar
  28. Heeeeeee que felicidad, despues de 100 pruebas me funciono haciendo caso a lo que dice la gentita
    importante colocarle al textarea el id igual al nombre
    eso me pasa por no hacer caso jajaja

    ResponderEliminar
  29. Hola que tal buenas tardes me funciono este post, pero quiero saber como puedo validar que no este vacio con Jquery

    ResponderEliminar