Como incluir jHtmlArea en un TextArea

html editor area jhtmlarea Antes que nada, debes estar preguntándote que es “jHtmlArea”. Bueno, pues se trata nada más y nada menos que de un simple y bastante ligero editor de tipo WYSIWYG (What You See Is What You Get) o lo que es lo mismo, un editor basado en que todo lo que ves es lo que se obtiene.

 

jHtmlArea editor

jHtmlArea  nos ofrece la posibilidad de incluirlo allá donde queramos y supongo que el uno de los mejores sitios en los que podemos ubicarlo es en la caja de los comentarios, dando a nuestros visitante la posibilidad de facilitar la introducción, por ejemplo de enlaces, poner en negrita o cursiva lo que está escribiendo.

jHtmlArea esta basado en jQuery, en el siguiente enlace, puedes ver una demonstración del mismo, en la que podrás comprobar por ti mismo el funcionamiento.

¿Como implementar jHtmlArea?

Parece a simple vista, algo complicado, pero es tan simple como contar hasta 3, pues son los pasos necesarios para disponer de este editor en nuestro Blog:

  1. Añadir un <TextArea> a nuestra página HTML
  2. Añadir los ficheros “jhtmlarea.js”, “jHtmlArea.css” y jHtmlArea.png” a nuestra web
  3. Añadir el siguiente código javascript a la página para convertir el TextArea en el editor.

El código para añadir los ficheros JavaScript a nuestra página es el siguiente (paso 2):

<script type="text/javascript" src="/ruta del archivo/jHtmlArea-0.7.0.js"></script>

El código para convertir los elementos TextArea al editor:

$(function(){     $("textarea").htmlarea();  />}); 

Esto podríamos aplicarlo a la caja de texto de WordPress, pero llevará su tiempo y unos conocimientos previos que quizás retome en otro momento para mostraros como hacerlo.

[Fuente: pietschsoft]

¿Te gusta compartir? ¡Comparte!
  •  
  •  
  •  
  •  
  •  
  •  

Comentarios para Como incluir jHtmlArea en un TextArea

  • Hola tengo problemas en la integración…

    La integración al textarea, se hace perfectamente, pero al publicar el texto, este no muestra los formatos que le he aplicado, es decir en la página no se ven los formatos, es como si no se hubiera aplicado ningún formato.

    lo mismo me ocurre al integrar tinymce, espero que me puedas ayudar…

    Fliberty 11 junio 2010 8:59 pm Responder
  • @Fliberty: tienes la cuenta suspendida y no hemos podido mirar tu blog.

    Vera 12 junio 2010 1:33 am Responder
  • Hola @Vera. muchas gracias por contestar tan pronto, hace unas cuantas horas que me suspendieron mi web porque rompio el límite de memoria y ya no se que hacer para evitar esto, he probado de todo y nada….

    Con respecto a la utilización de jHTMLArea, terminé por deshabilitarlo e intentar con el tinyMCE, el cual por el momento me esta mostrando el contenido publicado desde el area de comentarios, con todo y formatos, lo cual no sucede con el contenido publicado del formulario de publicación de entradas.

    Actualmente he creado un tema al respecto en ayuda wordpress: http://ayudawordpress.com/foro/topic/ayuda-con-formatos-utilizando-tinymce

    Y por cierto el formulario en cuestión lo estoy probando en local.

    Fliberty 12 junio 2010 2:47 am Responder
  • Que tal Vera, ya habilitaron mi web, por lo cual ya subi el theme modificado con la integración pero de tinyMCE, si puedes te agradecería le dieras una visita y darme un alcance de lo que podría estar sucediendo.

    Muchas gracias…

    Fliberty 12 junio 2010 7:42 pm Responder
  • @Fliberty: ya lo he visto, pero tendrás que verificar el motivo por el que al pulsar “Leer todo el artículo” salen caracteres codificados.

    Saludos y avisa cuando soluciones ese problema.

    Vera 12 junio 2010 8:18 pm Responder
  • Muchas gracias Vera, actualmente estoy trabajando en la compresión del css, para reducir la carga de la web.

    He accedido como me dices a una entrada mediante el enlace “Leer todo el artículo” y me muestra correctamente sin ninguna codificación, de todos modos voy a ir haciendo pruebas para ver a que se debe.

    Y voy a ir buscando información sobre como solucionar lo de los formatos.

    Muchas gracias por la atención.

    PD. Como has hecho con lo del recuadro de la parte inferior para colocar el usuario de twitter?.

    Fliberty 12 junio 2010 8:28 pm Responder
  • Ese recuadro lo hice gracias a un plugin sobre el cual tengo pendiente hablar en este blog.

    Saludos.

    PD: he vuelto a comprobar tu blog, pero sigue con el mismo problema.

    Vera 13 junio 2010 3:37 am Responder
  • Hola Vera, la verdad no se a que se debe que aparesca ese código raro…

    Por cierto encontré una opción más: MarkUpIt

    http://markitup.jaysalvat.com/

    Integré la barra de BBCode y HTML, pero sigo teniendo el mismo problema con la publicación, cuando publico en modo BBCode la publicación muestra las etiquetas publicadas, y cuando publico en HTML, este no muestra ningún formato, creo que una opción para utilizar el BBCode sería generar shortcodes en el functions.php y modificar el set.js de de la barra BBCode.

    PD. Lo último se me ocurrió mientras escribía este comentario, jejejeje…

    Fliberty 14 junio 2010 4:52 am Responder
  • @Fliberty: ese código raro puede ser, o bien la compresión que estás realizando, o algún conflicto entre plugins. Yo optaría por desactivarlos todos. Hacer una limpieza de cache y flushear las DNS para eliminar algún tipo de datos que haya quedado en caché.

    Parece interesante lo que mencionas sobre MarkItUp, tomo nota de ello. Lo último que has comentado podría ser otra posibilidad, pero es tiempo de trabajo.

    Saludos

    Vera 14 junio 2010 6:02 pm Responder
  • Que tal Vera, sabes creo que el textarea o el formulario tiene algo que ver con que no se publique el formato aplicado, porque he creado algunos shortcodes de prueba, y cuando los publico simplemente, el texto desaparece, mejor dicho no se muestra el contenido publicado.

    Mas tarde voy a publicar todo el contenido del sistema de registro y publicación de entradas desde el front-end, haber si me das una mano y llegar a un conclusión de lo que puede estar pasando.

    Por cierto, jHTMLArea funciona perfectamente desde los comentarios, lo desactive porque me generaba conflictos con otros scripts, bueno eso sucedió antes de encontrar la solucion con jQuery.noConflict.

    Muchas gracias por todo.

    fliberty 14 junio 2010 6:31 pm Responder
  • @fliberty: lo que deberías hacer es probar con desactivar la mayoría de los plugins que tengas activados y dejar solo los necesarios para las pruebas del textarea.

    Deberías además desactivar todos aquellos plugins que empleen jQuery o comentar aquellas líneas de código de la plantilla donde llamas a jQuery, hace tiempo había comentado en una de mis entradas que no se puede llamar a jQuery dos veces, porque da problemas.

    Espero que puedas solucionar ese problema, aunque si fuera tú, me centraría más el problema de visualización del blog, pues siguen existiendo errores en la comprensión, visualizándose caracteres ilegibles en lugar de las propias entradas.

    Un saludo y denada.

    Vera 14 junio 2010 9:16 pm Responder
  • Hola Vera, después de reinstalar nuevamente WP, y subir todo, creo que ya los códigos desaparecieron, quisiera que me des un visto bueno y me digas si estos benditos códigos siguen apareciendo.

    Muchas gracias…

    Fliberty 17 junio 2010 5:11 pm Responder
  • @Fliberty: Hola, ahora te ha quedado todo en orden ;). Supongo que el error ha debido de ser causado por la compresión que estabas realizando, aunque no podría asegurarlo al 100% pues desconozco los factores que hayan podido causar el problema.

    Denada y saludos

    Vera 17 junio 2010 6:59 pm Responder
  • Definitivamente creo que fue debido a la compresión, reinstalé wordpress como tres veces, la primera vez instalé W3 Total Caché y me siguieron saliendo los mismos errores, y reinstalé por segunda vez debido a un error que tuve en la DB, en esta ocasión cambié W3 Total Caché por WP Super Caché, lógicamente ya no tuve errores pero volvi a reinstalar debido a un error que tuve con los permisos de administrador al tratar de restaurar la DB de los usuarios, y como no día la forma de restaurar los pemrisos del admin desde phpmyadmin, pues reinstalé por tercera vez y ahora todo ok, y por cierto ya le coloqué el area para agregar el usuario de twitter…

    Muchas gracias por la ayuda, entonces ahora me dedicaré a ver la solución para lo del text-area.

    Que tengas un buen día.

    Fliberty 17 junio 2010 7:14 pm Responder
  • Ya me supuse que el problema era el tema de la compresión, se veía venir. En cuanto a lo de twitter es un simple plugin que como te dije tengo pendiente de hablar, lo que con tantas cosas que tengo que hacer fuera de la vida bloguera que casi no tengo tiempo para todo y claro. El tiempo es oro.

    Recuperar la contraseña del administrador es sencillo, simplemente se deben seguir unos sencillos pasos, los cuales hace tiempo detalle en esta entrada: Como recuperar la contraseña del administrador de nuestro blog en WordPress.

    Denada e igualmente. Espero que puedas ver el problema del textarea, y lo más lógico es que intentes probar a no activar los plugins cuando lo hagas, luego vas activando uno a uno y comprobando que tras cada activación el blog funciona, de ese modo sabrás cual de ellos crea el conflicto.

    Vera 17 junio 2010 11:09 pm Responder
  • Bueno el problema no fue precisamente recuperar la contraseña, eso es lo más fácil, el problema es que al realizar la importación de la DB de usuarios, pasé por alto eliminar el registro correspondiente al administrador, logicamente eso me dio este bendito error, o sea podía ingresar con el usuario pero solo tenia permisos de un usuario normal y no podía acceder a la administración.

    Muchas gracias por la ayuda Vera, voy a probar lo del textarea sin ningún plugin en local a ver que sucede.

    Fliberty 18 junio 2010 12:25 am Responder
  • @Fliberty: pues si que resulta raro perder de esa forma el control del blog, pero en fin, todo puede pasar jeje. Siempre vienen cosas peores que esas.

    Estaba pensando si hubiera sido posible que hayas instalado algún plugin malicioso, el cual haya creado algún usuario invible con los permisos adecuados de administrador. En estos momentos ya no merece la pena mirarlo, pero si lo hubiera pensado antes de hubiera recomendado echar un vistazo a las tablas wp_user y wp_usermeta, siendo ésta última donde se guardan los permisos de cada usuario según el rol que tengan.

    Al menos ya has recuperado todo ;).

    Saludos

    Vera 18 junio 2010 3:36 pm Responder

Dejar un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *