Configuring FCKeditor with BlogCFC

Every once in a while, my lazy side gets the best of me. It's not necessarily a bad thing, though. It's just that sometimes, writing blog posts in a textarea field can be a pain (no offense, Ray. BlogCFC rocks! And I saw those comments in tags/textarea.cfm ). Of course, as a programmer, I much prefer actually writing up the HTML for my markup on my own. However, this is a blog post, not a full-fledged application. I tried writing them offline in HTML and then posting them, but that didn't make things easier: formats weren't kept when I previewed the post in a browser (especially paragraphs). So I did the only thing a guy could do in such a situation: I turned to a Rich Text Editor. My editor of choice, and the one I hear the most (good) things about, is FCKeditor. It is completely open-source under the GPL, LGPL and MPL licenses. Easy to install and configure, it only took me about 5 minutes to get it up and running with BlogCFC (excluding all my FTP and wireless connection problems...). Here's how I did it.

The first thing you want to do is download the package from the web site. Once that is done, copy the fckeditor folder over to your application root (in my case, it was /blog/). You can remove the _samples folder if you want to save some space. To get it running with BlogCFC's entry editor, open up (from your blog's root) tags/textarea.cfm. Go to the bottom of the page and comment out the line surrounded by an opening and a closing CFoutput tag. Add this in it's place:

The first line creates a path to our fckeditor. Make sure this is accurate for your installation. The next line creates an instance of the fckEditor component. We then set some properties:

• <CFset fckEditor.Config['SkinPath']=basePath & "/editor/skins/office2003/" /> sets the skin we want to use. You can ignore this line if you plan on using the default skin.
• <CFset fckEditor.height="300px" /> sets the height of the editor, including the toolbars.
• <CFset fckEditor.basePath=basePath & "/" /> is required to tell FCKeditor where it's located.
• <CFset fckEditor.instanceName=attributes.fieldname /> gives our field a name, and uses the passed in fieldname from BlogCFC.
• <CFset fckEditor.value=attributes.value /> sets the original value for the field.

Once all of our properties are set, all we need to do is call <CFset fckEditor.Create() /> (between our CFoutput tags) to draw the editor. At this point, you can safely open your BlogCFC entry editor and you should see your very own Rich Text Editor!

If you're having trouble seeing all the buttons on the toolbars, that's because they weren't set to use a limited width. Luckily for us, they're very easy to customize. Open fckconfig.js in your main fckeditor folder and look for this line: FCKConfig.ToolbarSets["Default"] = [. You can create as many toolbar sets as you want. Think of them as structures containing arrays. Every array within the toolbar set structure represents a distinct toolbar line. You can also add content separators with the '-' label. Rearrange them as you see fit. The labels are pretty much self-explanatory, so I won't go over them in detail. Once you're done editing, save your fckconfig.js file, upload it and refresh your entry editor. Buttons! However, before we can fully enjoy our new entry editor, there's one last thing we need to do.

You can't write actual HTML in the basic view of FCKeditor. This means that the <more/> and <code></code> tags we love won't work up front. We need to add them in Source mode, so make sure you keep that button on your toolbars. However, FCKeditor tends to break these tags when returning to rich-text mode, since they're not valid HTML. To make sure they are kept intact, we need to add two lines to our fckconfig.js file. Look for a line that looks like this: // FCKConfig.ProtectedSource.Add( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ;, and add the following after it:

Both underscores (_) in the above example have to be removed. The only reason they are there is because writing the above example correctly broke the post.

Doing so will ensure that both tags will be kept intact.

There's only one last thing to do before we're done. When BlogCFC passes the value of the entry in upon editing, it parses back the string to an HTML-safe format. With FCKeditor, that's no longer necessary (and actually not wanted!). Open up admin/entry.cfm in your client folder and look for this line:

Change it to this and finish the last step:

And so there you have it. That wasn't so hard, was it? Enjoy your new Rich Text Editor!

Edit: I'm actually still missing something... Text between code tags still get broken when submitted, and going back in to edit an entry is really bad... I'll update this post when I find a solution.

2nd edit: Thanks to Scott Pinkston for the solution. Turns out all I needed to do was remove the HTMLEditFormat from entry.cfm. More details in the post.

3rd edit: A full working solution to our tag woes can be found here: Fixing FCKeditor To Work With BlogCFC, And Vice-Versa.

I'm sure I forgot something, but I just can't remember!