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 :).




