News

How can we give all the functionalities of a WYSIWYG text editor to our web applications users?

Alejandro Cimas, a member of the Artech Support Team, explains how to give all the functionalities of a desktop text editor to web applications users.

The GXtips move is getting along. They provide clear and practical advice that simplifies the tasks at the time of working. This time, Alejandro Cimas, a member of the Artech Support Team, explains how to give all the functionalities of a desktop text editor to web applications users.
 
 
The idea is to use an HTML desk editor that enables our web applications’ end user to enter the information in the most simple and customized way, as it has been implemented in the GeneXus Community wiki.

The FCKEditor is a text editor that we can integrate to our application and which offers many of the functionalities provided by any desktop text editor. We can use FCKEditor while developing for Java or for .Net, both on Windows or Linux platforms. It is very light and does not require any kind of installation in the client, so it is ideal for this case.

The mechanism to include the editor in a transaction or a web panel is very simple. After we download the editor we decompress it, for example in an “images” folder within our web app (web_app_path/images/fckeditor).

Typically we will want to include the editor in Long VarChar or VarChar type variables or attributes.  Let’s then imagine we have a Long VarChar type attribute (TmBody) and we want to use the Web Form editor of the transaction that we are using to enter that data. We will add a text block (tbFckEditor) to Web Form with the Format = Raw HTML property and in the Start event of the object we’ll add the following code:

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

It should all be ready by now, and we may have to use an HTML text editor that will enable our web applications’ final user to enter information in a simple and customized way.