Using GAIA with Obout HTML Editor

Modified: 2009/06/13 21:34 by exorgroup - Categorized as: Tutorials
Many have posted in GAIA's forum that they would like to see GAIA working with a WYSIWYG Editor. After some testing, I got GAIA working with the Obout HTML Editor. For those who do not have an idea of this editor please allow me to highlight some of its features.

Identical standards compliant XHTML in all browsers Generates browser independent standards compliant XHTML. Created content looks exactly the same in all browsers. No more and other depreciated tags.

Quick formatting Create any CSS classes with any styles and load them into the editor. Let your users format text with just one click. It's like macros on steroids!

Load on demand Features that require some heavy processing are loaded on demand only when used for the first time. This saves loading time and page size.

Fully customizable interface Show only buttons and functions your users use and hide the rest. Fully customizable with CSS to fit your tastes. You can create your own buttons and popup windows.

Entire page HTML code generating Many other Editors generate HTML code for document's body content only. You can get the entire page HTML code with head section, stylesheets and so on.

Source:Obout Inc Editor Home page

Getting it to work with GAIA

The editor renders perfectly if GAIA. It also works perfectly until you try to use ForceAnUpdate to update its content. Now Obout provides some nice client methods that pretty much let you do most of the stuff from client side using JavaScript.

GAIA provides a nice and simple way to perform JavaScript actions through the method AddScriptForClientSideEval.

All we need now is to marry the two in one of our functions and the Obout Editor content gets updated from server side without postback.

The following is the code of my function in VB.Net to perform and update on the editor

Sub setEditor(ByVal Content As String)

   'Replace single quote with respective code to prevent unexpected termination of code
   Content = Replace(Content, "'", "& #39;") 'remove space when used in your code

   'Push content to editor using a JavaScript call
   Gaia.WebWidgets.Manager.Instance.AddScriptForClientSideEval("oboutGetEditor('editor1').setContent('" & Content & "');")

End Sub


Should you wish to get the data from the editor, you do not need any JavaScript with the Obout HTML Editor if the above is used. You simply get the content as you normally do from server side using editor1.Content.

The above has been test in Internet Explorer 6, 7, and 8, Firefox 2 and 3 and Google Chrome 2.

Obout Editor Preview

Obout Editor Preview

ScrewTurn Wiki version 2.0.33. Some of the icons created by FamFamFam.