Getting tinyMCE to play nice with dp.SyntaxHighlighter

written by Geoff Bowers on Sunday, 25 February, 2007 @ 10:14 PM

I whipped up a quick blogging application to test the new FarCry 4.0 build -- so your looking at a work in progress. FarCry uses tinyMCE as its standard rich text editor and I've always liked the look of dp.SyntaxHighlighter so I thought I might look into how to make the two play nice together.

dp.SyntaxHighlighter is a Javascript library that converts textarea form elements into pretty code highlighting boxes -- you can see examples on this page :) Unfortunately, the out of the box implementation of tinyMCE is going to give you some trouble.

To get dp.SyntaxHighlighter to work you need to wrap your code block in a textarea with some specific attributes.

<textarea name="code" class="c#:nogutter:nocontrols" cols="60" rows="10">
... some code here ...

One of the great features of tinyMCE is the way it tries to clean up mangled HTML. It's not perfect but it does a bang up job. One of its approaches to this problem is to strip out all HTML elements it doesn't consider to be valid. This typically includes textarea by default.

You can add to the valid elements in tinyMCE by adjusting the config slightly. Make sure you include all the relevant attributes you might need.

extended_valid_elements: "textarea[name|class|cols|rows]",
remove_linebreaks : false,

By default tinyMCE strips out all the line breaks in your content to create a single line of HTML. This appears to be a legacy behaviour to assist with older CMS solutions that automatically put line breaks into your content. If you let this carry on continue your code block will be a mess. Hence the second line of extra config you'll need to add.

Well there you have it, proof positive that tinyMCE plays nice with dp.SyntaxHighlighter.