I've been looking at WYSIWYG editors recently, with the goal of integrating one into Pebble so that non-techies can easily create and edit blog entries. There are quite a few editors around, some free and some commercial. So far, the one that I like the most is called FCKeditor. It's open source and licensed under the LGPL. As with most of these editors, it works on the majority of browsers except Safari, but hopefully support is coming. Anyway, if you want to integrate FCKeditor into your own Pebble install, here's what you need to do.

1. Download FCKeditor
Download FCKeditor (I'm using version 2.0).

2. Install FCKeditor
Unextract the downloaded file and copy the entire directory into the root of your Pebble web application installation. Rename this directory to FCKeditor.

3. Integrate with Pebble
Add the following code into the /jsp/editBlogEntry.jsp file in your Pebble web application. Anywhere near the top of the file is fine.

<script type="text/javascript" src="<%= request.getContextPath() %>/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
  var oFCKeditor = new FCKeditor( 'excerpt' ) ;
  oFCKeditor.BasePath = '<%= request.getContextPath() %>/FCKeditor/' ;
  oFCKeditor.ToolbarSet = 'Basic' ;
  oFCKeditor.ReplaceTextarea() ;

  oFCKeditor = new FCKeditor( 'body' ) ;
  oFCKeditor.BasePath = '<%= request.getContextPath() %>/FCKeditor/' ;
  oFCKeditor.ToolbarSet = 'Basic' ;
  oFCKeditor.ReplaceTextarea() ;
}
</script>

4. The end result

5. Optional steps
You can customize FCKeditor further if you like. For example, I edited the "Basic" toolbar configuration to add some more buttons, by modifying the /FCKeditor/fckconfig.js file as follows.

FCKConfig.ToolbarSets["Basic"] = [
	['Source','-','Bold','Italic','Underline','StrikeThrough','-','OrderedList','UnorderedList','-','Link','Unlink']
] ;

So where do we go from here? Well, I'd like to include a WYSIWYG editor in the standard Pebble distribution and since FCKeditor is licensed under the LGPL, that's possible. I'm slightly hesitant to include one now that doesn't support all browsers, only to find another pops up in the future that does. Of course, behaviour in unsupported browsers isn't affected because you just get the normal HTML textarea. Need to give it some more thought, but I'll certainly add some documentation about how to integrate FCKeditor with Pebble. What do you think?

Responses[8]

Posted by Simon Brown on 02 August 2005 21:29:56 BST #