Fixing < code > blocks when using TinyMCE in BlogCFC

Mon, 19 Nov 2007 21:10:00 +0100

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

[More]

Firefox bug when using TinyMCE with BlogCFC - [ Exception NS_ERROR _NOT_AVAILABLE ]

Mon, 19 Nov 2007 21:00:00 +0100

I've just discovered that when using TinyMCE with BlogCFC an exception is generated in Firefox 2 which means you can't use the editor component.

I have worked out a fix, which is due to the BlogCFC post entry page initially setting the main div (tabber) to 'display:none':

admin/entry.cfm - line 246 (in BlogCFC 5.9):

{code}
<script type="text/javascript">
//Used to hide tabber flash

document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
{/code}

To fix, simply remove this style:

{code}
<script type="text/javascript">
//Used to hide tabber flash

document.write('<style type="text/css">.tabber{}<\/style>');
</script>
{/code}

I thought this might affect the operation of the tab switching but it seems to have no visible effect, so all is well.

Let me know if anyone get's an issue with this.

James Allen's Coldfusion and Internet Technology Blog - BlogCFC

Fixing < code > blocks when using TinyMCE in BlogCFC

Firefox bug when using TinyMCE with BlogCFC - [ Exception NS_ERROR _NOT_AVAILABLE ]