Notícias

Como dar todas as funcionalidades de um editor de texto WYSIWYG aos usuários das nossas aplicações web?

Alejandro Cimas, integrante da Equipe de Suporte da ARTech, nos explica como dar todas as funcionalidades de um editor de texto de escritório aos usuários das aplicações web.

A agitação dos Gxtips continua em movimento. Conselhos claros e práticos que nos simplificam as tarefas na hora de trabalhar. Nesta oportunidade, Alejandro Cimas, integrante da Equipe de Suporte da ARTech, nos explica como dar todas as funcionalidades de um editor de texto de escritório aos usuários das aplicações web.
 
 
A idéia é utilizar um editor de texto HTML que permita ao usuário final das nossas aplicações web ingressar a informação de forma mais simples e personalizada, como por exemplo, já está implementado no wiki da Comunidade GeneXus

O FCKEditor é um editor de texto que podemos integrar à nossa aplicação e que nos oferece muitas das funcionalidades que proporciona qualquer editor de texto de escritório. Podemos utilizar FCKEditor tanto desenvolvendo para Java como para .Net, tanto em plataforma Windows como Linux. É muito leve e não requer nenhuma classe de instalação no cliente, motivo pelo qual é ideal para o caso.

O mecanismo para incluir o editor em uma transação ou em um web panel é muito simples. Depois que baixamos o editor e descompactamos, por exemplo, dentro de uma pasta “imagens” dentro da nossa web app (web_app_path/images/fckeditor).

Em geral vamos querer incluir o editor em variáveis ou atributos do tipo Long Varchar ou VarChar. Imaginemos, então, que temos um atributo do tipo Long VarChar (TrnBody) e que queremos utilizar o editor no Web Form da transação que utilizamos para ingressar esse dado. Acrescentamos um text block (tbFckEditor) ao Web Form com a propriedade Format - Raw HTML e no evento Start do objeto acrescentamos o seguinte 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 += "</SCRIPT>" + newline()
EndEvent

Tudo deveria ter ficado pronto a esta altura e poderemos ter que utilizar um editor de texto HTML que permita ao usuário final de nossas aplicações web o ingresso de informação de forma mais simples e personalizada.