MainelyDesign.com Blog

Preformatted Text in TinyMCE <pre></pre>

Posted on 04/21/2009 at 10:26 am by Kevin Wentworth
Viewed 21,790 times | 1 comment

Now that I've got my blog up and running, I've been playing around with syntax highlighting of source code.  I really appreciate sites that serve up code samples in a nice format, so I've tried to comply with my own version of this best practice.

Getting Geshi working, for syntax highlighting was one battle (I'll try and post what I came up with later). My real trouble came with using <pre></pre> tags for my code samples within TinyMCE.  I absolutely love TinyMCE! I did a lot of research on the best JavaScript-based WYSIWYG editor oh about 5 years ago, and decided on TinyMCE and never looked back.  I use it in all of my applications that require formatted HTML input (especially Site Avenger).  Every now and then I will look at another editor (I know 5 years is ancient by web standards) but I've never found an editor I like more.  Each editor has its quirks and I think the quirks within TinyMCE are the most manageable (as I tell my clients- even MS Word has quirks, you're just used to them).

I was having some issues using the PRE tag in TinyMCE.  I hadn't upgraded my TinyMCE install for quite a while so I decided to upgrade. I was a little nervous (and avoiding the upgrade) because of some of the custom-built Javascript code that I knew would break.  Much to my delight, the upgrade went very smooth, and all of my functionality worked, with the exception of this weird hack I had been using to initialize the editor.  With a fresh look at that hack, I decided I didn't need it and ended up using a native config setting that did the same thing- mode: exact, elements: "textareaName, textArea2, etc."  It's nice to "refactor" your code!

So now I had Site Avenger running TinyMCE v3.2.2.3 with all my custom-built bells and whistles.  I got down to writing my blog entries and started seeing some weird behavior- if I pasted content (through the plain-text dialog window) into a <pre> tag, the spacing/tabbing would be perfect.  If I began to edit the code within the <pre> tags (through the TinyMCE editor), especially adding new lines, my line feeds would be turned into line breaks (<br />). Not good... I also found that if I went in and edited an article I had already posted (say for a typo) then the <pre> contents would all get <br /> added.  I figured it was the way I was doing it.

Turns out, a lot of people are frustrated with TinyMCE's handling of content within <pre></pre> tags.  Someone finally got fed up enough to provide a plugin, aptly named, prelementfix.  All you do is add this to your plugins directory, and your plugin config line, and TinyMCE starts acting exactly how I need it to.  Hitting the tab key tabs the content.  No extraneous <br /> getting stuffed in the code.  The code within the pre tags was staying intact and properly formatted.  Thank you T Andersen!

I was only pasting PHP code snippets, so I wasn't running into issues with html entity encoding like many people do.  I'd love to see this preelementfix plugin functionality be the default.  Maybe incorporate the htmlentityencoding that the TinyMCE developers insist <pre> tagged content needs.