The current project I am working on is a fairly simple web application using WebWork. Though the application is fairly simple, the time frame we have to work with is very short. So when the customer requested features such as rich text editing capabilities ao that content authors can be creative with the updated content, I freak out a little. This is mainly because I have never had to incorporate rich text editing on any web application I have developed before and I had no idea of what was involved. I envisaged it being potentially a lot of work to add such support.
So I spent a couple of hours researching what tools, and techniques are available and what would best suit our needs. It was during this that I came across FCKeditor. This is an open source rich text editor implemented in JavaScript that is also supported in multiple browsers. Have a look at http://fckeditor.net/demo/ for a working sample.
So my first question is how can I use this in my WebWork application? I still want the mechanism in WebWork that ensures that my form fields are set on my WebWork action to still work with out having to do a lot of extra work. The solution turned out to be surprisingly simple.
FCKeditor supports two ways of embedding a rich text control into your page.
The first way involves placing an FCKeditor inline by inserting similar JavaScript as below into the desired location for the rich text control to appear:
var oFCKeditor = new FCKeditor('richTextField');
oFCKeditor.Create();
</script>
A personal hate of mine is to have JavaScript riddled through out my pages and so I am not a big fan of this method. I also failed to see an easy way that this was still going to work with the WebWork framework.
A second method involves replacing TEXTAREA tags with an FCKeditor as the page loads. This involves adding an "onload" method to the page that can do the replacement:
<head>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor('richTextField');
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="richTextField" name="richTextField">Some sample <b>formatted<b> text.</textarea>
</body>
</html>
Using this approach, I was able to take my jsp page with my form and textareas defined with WebWork's custom tags, and add the "onload" method to replace the various textareas with an FCKeditor. It worked perfectly.
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor('richTextField');
oFCKeditor.ReplaceTextarea();
}
</script>
</head>
<body>
<ww:form method="'post'" name="'inputform'" action="'save.action'" >
<ww:textarea label="'Rich Text Field'" name="'richTextField'" rows=5 cols=40 />
<ww:submit value="'Save'" align="center" />
</ww:form>
</body>
</html>
In the end, a requirement that I feared could potentially burn up a lot of valuable time took no more than a morning to research and implement.