HTML Area. Editor WYSIWYG

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