Fixing < code > blocks when using TinyMCE in BlogCFC

While working on setting up and integrating the superb BlogCFC with my own custom template, I discovered that the admin section does not utilise a richtext editor (Ray is hardcore :). However, Ray has been very helpful by splitting out the textarea HTML used on the blog entry input page which makes it very easy to plug in a suitable rich text editor.

The one I have chosen is TinyMCE. It's very nice to configure (incredibly easy - easy is good) and pretty lightweight. Nick Tong over at succor.co.uk blogged about adding TinyMCE to BlogCFC last year and it's a nice clear guide to anyone who wants to do this. Check out his blog post here.

Now, while it's a pretty trivial job to get TinyMCE working with BlogCFC there are a number of initial problems that break some functionality. These are to do with the custom tags which you can use to embed certain formatting / features into a blog post. As the tags are HTML style TinyMCE decides to nuke them from the source code view and escapes them in visual mode - not good.

The first of these is the <more/> tag which allows you to break up a blog post so that on the index page you only see a summary and then click 'more' to view the entire post. A fix to this is to modify BlogCFC to support [ more/ ] instead. Nick Tong has again blogged about making the changes here.

The second problem is in including a nicely colour coded scrolling code box which you can use to include Coldfusion code samples on your blost posts. Out of the box, the way to do this is to enclose the code sample with <code> </code> tags. As above, this is a no no with TinyMCE as it doesn't recognise the tags as valid HTML and so removes them. If you try including them in the visual mode (which is what I wanted) it escapes the characters and breaks the functionality.

I spent a couple of hours looking into this and have come up with a modification which allows the code output functionality to work in visual editing mode, but using { code } and { /code } tags instead (without the spaces - I am having to do that to avoid my mod kicking in and showing 'and' in code display :).

It's not perfect as any e-mails then get sent out will include the { code } and { /code } tags, although this could be fixed by modifying the e-mail sender function.

Anyway, here is the code. The first block shows what code you need to replace. The second block is the code you will need to copy and paste into blog.cfc. This mod is based on version 5.9 of BlogCFC though it may work in earlier versions:

File: org/camden/blog/blog.cfc - Lines 2087 - 2113:

Replace the above code with the following:

This should work nicely and allow you to add code blocks into TinyMCE visual mode.

You can change the start and end tags recognised for code output by editing this block of code:

The 'richText' key signifies that the start and end tags contain text from a richtext editor and thus require certain character filtering etc.

Let me know if you find any problems with this. I have a nasty suspicion there may be a few problems with certain code samples but I haven't had too much time to test this yet. Looking good so far though.

Apologies in advance if anyone comes up with a cleaner and simpler way of doing this - this was really just a quick fix to get TinyMCE working with code output - , but if you do please post in the comments.