Using a rich editor in ADF applications

About a year ago Frank Nimphius wrote this weblog article about using a rich text editor called openWYSIWYG in ADF applications. Recently we encountered the need for such an editor in one of our ADF applications. I found Franks article quite useful. However, I also found that I needed to make a few minor modifications to make it really work. Besides that, we have some requirements regarding the availability of some of the toolbar buttons. This next short article describes what modifications my colleague Lucas Jellema and me made to make the openWYSIWYG editor behave like we wanted to.

Adjustments needed to make the editor work

The WYSIWYG editor is made available through a JavaScript library. In this library, several paths are defined. These paths point to the popup frames, css files and icon images locations. By default, the lines defining these locations are

imagesDir = "icons/";
cssDir = "styles/";
popupsDir = "popups/"

Since

• “installing” the wysiwyg editor simply involves unzipping the downloaded zip file and including the JavaScript library in the JSF page
• we unzipped this zip file in the web root of our web application (public_html)
• we use JHeadstart to generate our pages and JHeadstart puts them in pubic_html/pages

we needed to modify the paths. Here’s what we set them to

imagesDir = "../icons/";
cssDir = "../styles/";
popupsDir = "../popups/"

Making toolbar items invisible

Our business case specifically required us to makje most of the toolbar buttons invisible. We only wanted to enable the end users to be able to make the font bold, italic or underlined and to included bulleted lists. The easiest way to do this is to set the style class of these buttons to “display: none”. Besides that, the openWYSIWYG toolbar conatins several separators. We wanted them to be invisible as well.

The solution we came up with was to include an CLASS attribute for each button and separator that is rendered in the toolbar. Then modifying the display attribute of those classes in our css file should render the buttons and separators (in)visible. Inspection of the JavaScript code shows that the buttons all have an ID, e.g.

var ToolbarList = {
//Name              buttonID                 buttonTitle           buttonImage                            buttonImageRollover
  "bold":           ['Bold',                 'Bold',               imagesDir + 'bold.gif',               imagesDir + 'bold_on.gif'],
  "italic":         ['Italic',               'Italic',             imagesDir + 'italics.gif',            imagesDir + 'italics_on.gif'],
  "underline":      ['Underline',            'Underline',          imagesDir + 'underline.gif',          imagesDir + 'underline_on.gif']

So, the “bold” button has the ID “Bold”, the “italic” button has the ID “Italic” etc. Further inspection of the code shows that both the drop downs for the fonts and the separators do not have such an ID. This means that we made this modification in the same ToolbarList variable shown above:

    "separator":      ['Seperator',            'seperator',          imagesDir + 'separator.gif',          imagesDir + 'separator.gif'],

In other words, the “separator” item now has the ID “Separator”. Next, we modified lines 254 and further as well as lines 283 and further like this

			if (buttonName[i] == "Separator") {
		    toolbar += '<td class="'+buttonID+'" style="width: 12px;" align="center"><img src="' +buttonImage+ '" border=0 
		    unselectable="on" width="2" height="18" hspace="2" unselectable="on"></td>';
			}
	    else {
		    toolbar += '<td class="'+buttonID+'" style="width: 22px;"><img src="' +buttonImage+ '" border=0 unselectable="on" 
		    title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" 
		    onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' + buttonImageRollover + '\';" 
		    onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" 
		    width="20" height="20"></td>';

This makes sure that each button gets a class attribute that equals the ID of the defined button. Please note that lines 283 and further are different than the ones shown here, but they too got the addition

class="'+buttonId+'"

In order to render the drop downs invisible we modified lines 242 and 243 like this

    toolbar += '<td class="FontSelect" style="width: 90px;"><span id="FontSelect' + n + '"></span></td>';
    toolbar += '<td class="FontSizes" style="width: 60px;"><span id="FontSizes'  + n + '"></span></td>';

Finally, we modified our css like this:

.FontSelect, .FontSizes, .Seperator, .Subscript, .Superscript, .Justifyleft, 
.Justifycenter, .Justifyright, .InsertOrderedList, .Outdent, .Indent, .toolbar2
{display:none

The final result looks like this: