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:
i wanna see this project. Can you download this App.
Hi,
how can I access to the example of Frank Ninphius?
I think that the blog is not yet available :-S
Thanks..
Hi,
I think that the most flexible and useful with ADF Faces is TinyMCE. I wrote about it on my blog: http://kuba.zilp.pl/?id=21
Hi Martin,
Yes I have used FCKEditor as well in the past. However, as far as I know there is no JSF tag for it. So it may be hard to use it in a JSF application.
Greets, Wouter
I have had some good results with FCKeditor (http://www.fckeditor.net/) in the past as well, although not with ADF. Didn’t know about openWYSIWYG.