HTML Area. Editor WYSIWYG

  • Por
Herramienta que permite crear elementos de formulario donde el usuario puede escribir texto con estilos.
Vamos a presentar una herramienta gratuita que sirve para crear elementos de formulario, parecidos a los <textarea>, pero con la particularidad de que permiten introducir texto con estilos, como negritas, subrayados, distintos tipos de fuentes e incluso, tablas o imágenes. En definitiva, provee de las funciones típicas de los editores HTML WYSIWYG (what you see is what you get), pero dentro de un campo de formulario de una página web.

htmlArea se incluye en la página con unas pocas líneas Javascript fáciles de escribir. Con ello obtenemos un editor que permite funcionalidades como:

  • Formatear texto con negritas, cursivas y subrayados
  • Cambiar la tipografía y el color
  • Alinear los distintos párrafos
  • Incluir listas, líneas horizontales, links, images...


Como el programa está realizado en Javascript y trabaja únicamente del lado del cliente, lo podremos utilizar en cualquier tipo de servidor (no requiere programación ASP o PHP). La desventaja es que funciona únicamente en versiones de Internet Explorer 5.5 o superiores. Por lo menos, en otros navegadores, no dará errores, sino que simplemente veremos un campo <textarea> normal.

Cómo se inserta el htmlArea

Vamos a ver cómo se incluye este tipo de editor en una página web. Como primer paso, descargamos el software que podremos encontrar en la página de inicio de htmlArea. El archivo es muy pequeño. Viene en .zip, por lo que debemos descomprimirlo en nuestro ordenador.

Una vez descomprimido, encontramos ejemplos e instrucciones para su funcionamiento. Ejecutando el archivo llamado example.html podemos hacer una pequeña prueba, para ver si nuestro navegador soporta htmlArea. Si todo es correcto, podemos hacer nuestra primera prueba.

Vamos a crear un archivo HTML, para hacer nuestro primer ejemplo, en el mismo directorio donde hemos descomprimido el software. Lo editamos y colocamos en la cabecera el siguiente código:

<script language="Javascript1.2">
<!--
// Carga de htmlarea
_editor_url = "" // URL del archivo htmlarea var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
document.write(' language="Javascript1.2"></scr' + 'ipt>');
} else { document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }
// -->
</script>


Lo único que hay que editar en este código es la variable "_editor_url", a la que tenemos que asignar la ruta donde se encuentran los archivos de htmlArea. Como en este caso el archivo de ejemplo está en el mismo directorio que htmlArea, asignamos un string vacío a la variable:

_editor_url = "" // URL del archivo htmlarea

Continuamos colocando un formulario con un campo textarea dentro.

<form>
<textarea name="campo1" style="width:500px; height:200px;">
</textarea>
</form>


Nos fijamos que el campo textarea tiene un nombre, que luego utilizaremos. También hemos definido con atributos de estilos el ancho y alto del campo. Esto último es opcional pues, como cualquier campo textarea, también podríamos haber definido sus dimensiones con los atributos cols y rows.

Por último, debemos indicar que ese campo debe mostrarse como un contenedor HTML y no como un <textarea> normal. Para ello debemos incluir, a continuación del <textarea>, este código Javascript.

<script language="JavaScript1.2" defer>
editor_generate('campo1');
</script>


Es una llamada a la función que se encarga de generar el editor HTML a partir del campo <textarea>. Nos fijamos que la función recibe un string con el nombre del campo <textarea> que se desea convertir a htmlArea.

Con esto ya obtenemos el campo WYSIWYG. Podemos verlo en una página aparte.

Para conseguir que el campo htmlArea tenga un texto por defecto, simplemente debemos insertar ese texto entre <textarea> y </textarea>. Podemos insertar código HTML y se mostrará dentro de la propia página.

Podemos ver un segundo ejemplo que contiene un texto definido por defecto.

Podemos ver el código de ambos ejemplos con la opción "Ver código fuente" del navegador.

Conclusión

Nos hemos dejado por ver las múltiples opciones de configuración del programa, para limitar o mejorar las opciones de edición disponibles o la interfaz. En la propia documentación del programa podemos estudiarlas.

Existen varios productos parecidos a htmlArea. Hemos empezado comentando éste porque es muy sencillo, tanto en su instalación como en la utilización. Es muy interesante también porque se puede utilizar simplemente desde Javascript. No hay necesidad concreta de disponer de un servidor con posibilidades de programación en ASP o PHP, aunque lo lógico es que los utilicemos para combinarlos con el editor WYSIWYG y permitir que los usuarios actualicen información de la base de datos, incluyendo sus estilos, imágenes, etc.

Tiene muchas más ventajas, como su gratuidad. Podemos utilizarlo para cualquier propósito y modificar el código para adaptarlo a nuestras necesidades.

Podemos encontrar más información en:
http://www.htmlarea.com

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Pep Mut

16/11/2004
Es una herramienta muy interesante pero que solo funciona en Internet Explorer sobre Windows. No considero recomendable programar sólo para las mayorías. Los usuarios de Linux o Mac OS o los muchísimos usuarios que están dando el muy recomendado salto de IE a FireFox, ... (entre otros) conforman una inmensa minoría que no debe ser ignorada.

Abc7

19/11/2004
En la pagina de esta herramientan menciona a la version 3 beta, el cual soporta compatibilidad con Mozilla, FireFox y NetScape (Opera por ahora no). En este link. Saludos.

gonzalo

20/1/2005
el htmlarea es una herramienta excelente para que nuestros clientes puedan insertar / modificar areas de información en sus websites pero lo malo de este sistema es que genera unas etiquetas que no cumplen con los estándares, que hacen que mi trabajo de validar el código para W3C se vea estropeado una vez que usan este editor

Iranchaza

21/3/2005
Otro problemita que encontramos en el editor, es el hecho de usar tablas para acomodar el texto y no poder eliminar los bordes una vez editado el contenido.

Miguel Angel Alvarez

28/4/2005
Para los que no han conseguido hacer funcionar este sistema, pongo a vuestra disposición un zip con el código HTML y Javascript de las pruebas realizadas el día de escribir este artículo.

Funciona perfectamente. Eso sí, sólo va con Explorer.
Espero que con esas muestras tengáis una ayuda para encontrar el problema.

Eduardo Gamero

10/6/2005
Si bien está confeccionado sólo para IE hay que considerar que Yahoo accedido desde Firefox, tampoco permite el formateo de un mensaje de email. si querés formatear, entrá a Yahoo desde IE.

No hay que ser más realista que el rey.

Serbe

30/1/2007
Que pena con las personas que no les sirve esta función.... a mi me viene perfecto, lo único que les quiero preguntar es si alguien intentó modificar el código para colocar un justificado a la izquierda y la derecha. En estos momentos solo tiene para justificar a la izquierda, centrado y derecha.... Muchas gracias

yanelli

26/6/2007
Es sencillo de instalar, pero no encuentro el plugin que necesito para que suba imagenes de tu ordenador y no una URL.
Si alguien puede ayudarme se lo agredecere

jose

27/9/2007
Yo he tenido tambien dificultades, lo que no me aclaro es el response que te dá el formulario.
Lo he solucionado haciendo un vínculo al editor y reenviandolo al formulario.
Aceptaría sugerencias.

Lo podeis ver aqui: http://www.alfeizar.net/fotepro/foro/addcorreo.asp?cliente=635

Programación PHP / RSI SISTEMAS

03/12/2007
Muy bueno el post. Gracias por la info!

rene

14/12/2007
Estoy muy agradecido por el codigo que me vino bien y felicitarte por tu dedicacion, que nos permite a personas como yo poder superarse en este dificil camino de la programacion
Gracias

rene

14/12/2007
Estoy muy agradecido por el codigo que me vino bien y felicitarte por tu dedicacion, que nos permite a personas como yo poder superarse en este dificil camino de la programacion
Gracias

Tavitooo

10/1/2008
Amigos una pregunta como inserto CLASES (class) en el htmlarea? es que al momento de levantar una pagina html que tiene clases sale error!

Ramiro

18/1/2008
Yo he dejado de utilizar esa aplicación por los motivos mensionados. Internet Explorer no respeta los standares, y eso no sirve. Otra cosa. Google es el rey.

Tavitooo

05/2/2008
no es compatible con el convertido FPDF :( para convertir tus documentos de htmlarea a PDF!!

aldo

13/2/2008
Todo muy bien con esta herramienta...como puedo hacer para lograr que el tipo de letra lo domine el css de mi web y no las "geniales" ideas que puedan tener los usuarios, y que a veces acaban con el diseno original?

carlozzz

07/9/2009
necesito ayuda o una aclaracion
quisiera saber porque al crear un link con los editores como este al hacer un submit e imprimir el link en la pagina de destino no funcionan correctamente y sale la direccion algo haci http://localhost/%22http//direccion/%22

ya he probado con unos 6 editores y con todos me pasa lo mismo porfavor necesito salir de este drama

gracias de antemano!

Data

31/1/2010
El uso de otro font, no funciona, da un error.
Esta muy bueno el editor, pero si se cambia el font y queres grabarlo, da un error de "cadena", pienso que hay algún problema entre el tilde y las comillas, pero no logro darme cuenta en dónde.
Cuando pretendo grabarlo en un campo Memo, a veces se graba, a veces no, cuando no el error que da es este:

''<SPAN style="FONT-SIZE: 26pt; FONT-FAMILY: Wingdings; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; mso-ansi-language: ES; mso-fareast-language: ES; mso-bidi-language: AR-SA">/()=?¿*^POIUYTREWQAS</SPAN>''.

El error aparece cuando se copia en el campo desde Word.



¿Alguien me puede orientar al respecto? Gracias.