Noticias

¿Cómo darle todas las funcionalidades de un editor de texto WYSIWYG a los usuarios de nuestras aplicaciones web?

Alejandro Cimas, integrante del Equipo de Soporte de Artech, nos explica cómo darle todas las funcionalidades de un editor de texto de escritorio a los usuarios de las aplicaciones web.

La movida de los GXtips sigue su curso. Consejos claros y prácticos que nos simplifican las tareas a la hora de trabajar. En esta oportunidad, Alejandro Cimas, integrante del Equipo de Soporte de Artech, nos explica cómo darle todas las funcionalidades de un editor de texto de escritorio a los usuarios de las aplicaciones web.
 
 
La idea es utilizar un editor de texto HTML que permita al usuario final de nuestras aplicaciones web el ingreso de información de forma más simple y personalizada, como por ejemplo ya está implementado en el wiki de la Comunidad GeneXus.

El FCKEditor es un editor de texto que podemos integrar a nuestra aplicación y que nos ofrece muchas de las funcionalidades que brinda cualquier editor de texto de escritorio. Podemos utilizar FCKEditor tanto desarrollando para Java como para .Net, tanto en plataforma Windows como Linux. Es muy liviano, y no requiere ninguna clase de instalación en el cliente, por lo que es ideal para el caso.

El mecanismo para incluir el editor en una transacción o en un web panel es muy simple. Luego que bajamos el editor lo descomprimimos, por ejemplo debajo de una carpeta “images” dentro de nuestra web app (web_app_path/images/fckeditor).

En general vamos a querer incluir el editor en variables o atributos de tipo Long Varchar o VarChar. Imaginemos entonces que tenemos un atributo de tipo Long VarChar (TrnBody) y que queremos utilizar el editor en el Web Form de la transacción que utilizamos para ingresar ese dato. Agregamos un text block (tbFckEditor) al Web Form con la propiedad Format = Raw HTML y en el evento Start del objeto agregamos el siguiente código:

Event Start
   Form.JScriptSrc.Add("cookies.js")
   Form.JScriptSrc.Add("fckeditor/fckeditor.js")
   tbFckEditor.Caption += "var oFCKeditor = new FCKeditor( '" + TRNBODY.InternalName + "');" + newline()
   tbFckEditor.Caption += "oFCKeditor.BasePath = '" + &BasePath + "';" + newline()
   tbFckEditor.Caption += "oFCKeditor.Height = 400;" + newline()
   tbFckEditor.Caption += "oFCKeditor.Value = oFCKeditor._HTMLEncode(document.getElementById('" + TRNBODY.InternalName + "').value);" + newline()
   tbFckEditor.Caption += "oFCKeditor.ReplaceTextarea();" + newline()
   tbFckEditor.Caption += "" + newline()
EndEvent

Todo debería haber quedado pronto a esta altura, y podremos tener utilizar un editor de texto HTML que permita al usuario final de nuestras aplicaciones web el ingreso de información de forma más simple y personalizada.