CoderMCE, a Joomla WYSWYG editor for source code

Basically, I wanted to be able to do this with the minimum of fuss and effort:

What are the options?

The first thing I tried was using the TinyMCE editor's "preformatted" blocks. This displayed the code in a monospace font (good) and allowed me to indent each line as I wanted. But I found that the indentation was often stripped out, maybe because TinyMCE does not using non-breaking spaces for the indentation. I could have gone into the HTML and changed them myself but that's a lot of hard work.

Then I tried entering the code directly into the HTML in various ways but this was even more hassle than TinyMCE's preformatted blocks. I tried JCE, another WYSWYG editor for Joomla but didn't find any features that made source code easier to work with.

At this point I decided it was time to read the manual! I discovered that Joomla comes with two plugins designed for working with code: moscode and geshi. These allowed me to enter my code into the HTML without having to use HTML entity references for reserved characters like '&', '<' and '>', which was a big help. Geshi can also do syntax highlighting for a variety of languages, a definite plus. But they still didn't prevent the indentation from getting stripped out when I switched back to a WYSWYG editor. Either of these would be a good solution for someone who always edits HTML by hand and never uses a WYSWYG editor like TinyMCE. But I would rather not work directly with HTML. It's the 21st century and there must be a better way!

I should also mention geshibot. Geshibot is an enhanced version of geshi and might be a good choice for someone wanting to pursue the hand edited HTML approach.

The solution I went with was the insertcode plugin by Maxime Lardenois. This plugin is excellent. Clicking a button in the TinyMCE toolbar brings up a dialog box in which you enter a title, select a language (for syntax highlighting) and enter your code in the text area. The code is then inserted into the rest of the content, all correctly formatted. The indentation is reliably preserved and there is no need to use HTML entity references for reserved characters. If the code needs to be changed, just select it and click the toolbar button again. It is even possible to edit the code in the main TinyMCE window but the syntax highlighting is not updated. That's pretty close to perfect!

Well not quite. Insertcode is not a Joomla plugin. It's a TinyMCE plugin. It is possible to use with Joomla but installation is difficult. So having gone through it all, I am making my efforts available to the Joomla community. CoderMCE is my slightly modified version of TinyMCE with the insertcode plugin preinstalled. It is packaged as a Joomla mambot and it installs in the usual way.

You might notice that although your source code looks good when in the admin interface, it loses some of its formatting when you view it on your site. That's because the formatting requires a stylesheet which is not included in any Joomla site templates. You'll need to modify the template you use so that it links to insertcode.css. I did it by adding a link tag to the head of my template's index.php file, like this:

Notice the link tag on line 9. It needs to be added between the head tags. In this example, the insertcode.css stylesheet needs to be copied into the same directory as index.php.

Download CoderMCE and the insertcode.css stylesheet here