Including FCKEditor in your Web Objects

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

The idea is to use an HTML desk editor that enables the end user of our web applications to enter information in the most simple and customized way, as it has been implemented in the GeneXus community wiki:

The FCKEditor is an open source text editor of the WYSIWYG kind that we can integrate into our application and which offers many of the functionalities provided by any desk text editor.

We can use FCKEditor while developing for Java or for .NET, both on Windows or Linux platforms. Besides being very light, it is distributed under LGPL license and does not require any kind of installation in the client. For more information, see: http://www.fckeditor.net/

The mechanism for including the editor in a transaction or a web panel is very simple: after downloading the editor (http://www.fckeditor.net/download), we decompress it, for example under an images folder within our web app (web_app_path/images/fckeditor), where "images" corresponds to our Static content base URL.

Typically, we will want to include the editor in LongVarChar or VarChar type variables or attributes. Suppose that we have a LongVarChar 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 the Web Form with the Format = Raw HTML property and in the Start event of the object we will add the following code:

Event Start
&BasePath = '/' + &webappname.Trim() + '/images/fckeditor/'   
Form.JScriptSrc.Add("fckeditor/fckeditor.js")
tbFckEditor.Caption = "<SCRIPT type=text/javascript>" + newline()
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

//&webappname = virtual_dir_name in the case of .NET or web_app_name in the case of Java

Download Sample

Download GXwiki 3.0