Drupal + WYSIWYG + tinyMCE + syntaxhighlighter

UPDATE: I've written a new version of this article that should be followed instead of this slightly-dated version.  

I've recently taken another look at tinyMCE integration in Drupal. I used to use tinyMCE on all my sites, but have migrated most of my editing to the desktop. This is a short article on how to get Drupal, the wysiwyg module, the tinyMCE editor, and the javascript SyntaxHighlighter library all integrated together.

There are several online guides on how to get these components to work together, but none of them were complete or up to date with the latest versions of all the components.

I will assume you have drupal installed already. These instructions were done on version 6.10, but should work on any recent 6.x version.

Get wysiwyg

You can use the recommended version or the development version. I've chosen to get the the 2.x dev version.

• Download it from the project web site.
• Put it your modules directory and enable it.
• Visit admin/settings/wysiwyg. Under the installation instructions, you can see the various editors that are supported. This is handy because it shows you where you can download each editor. We will come back to that in a moment.

Get tinyMCE

The tinyMCE package ships separately, so you will need to install it.

• From the wysiwyg settings page ( see above), there is a link to the tinyMCE download page
• Get the latest version of tinyMCE and put the zip file in modules/wysiwyg/tinymce directory
• unzip the tinyMCE package

Now you should have a directory structure like this:

• Visit admin/settings/wysiwyg. Make sure that under the 'Installation instructions' sections it shows TinyMCE as 'installed'

Edit Full HTML Input format

Some of these steps may not be necessary, but they worked for me. YMMV here. I edited my 'Full HTML' ( at admin/settings/filters) input filter and turned off all filters ( except a filter I use to fight spam ). My filter looks like this:

FYI, the 'hide email address' filter is provided by the SpamSpan module.

Configure and test TinyMCE

• On the wysiwyg settings page, select tinyMCE as one of your input formats. I recommend you use 'Full HTML', edited as above.
• Click on the edit button.

My Cleanup and output section looks like this:

Go and create some content and make sure that the tinyMCE editor windows shows up.

Install syntaxhighlighter

Although you could get the stand-alone version, there is a drupal module for this library.

• Go get the module at their drupal.org project page.
• Unpack it in the usual location ( sites/all/modules or equivalent )
• Enable the module and then visit /admin/settings/syntaxhighlighter.
• Choose the languages you wish to support
• Choose your theme ( I am using the default theme on my pages )
• Ensure that the tag name is set to 'pre'
• You can disable Legacy mode
• Save the settings

Get the syntax plugin

There is a tinyMCE plugin that does the integration between SyntaxHighlighter and tinyMCE. We need to install it and enable it for tinyMCE.

• Download either the zip or tarball version from the project website.
• Unpack it in the tinyMCE plugins directory. Typically this will be something like /sites/all/modules/wysiwyg/tinymce/jscripts/tiny_mce/plugins
• You will now have a directory structure like this: sites/all/modules/wysiwyg/tinymce/jscripts/tiny_mce/plugins/syntaxhl

Enable the syntax highlighter

Now you need to tell tinyMCE (or wysiwyg) about the new module. Edit sites/all/modules/wysiwyg/editors/tinymce.inc and add the following code snippet in the plugins section:

$plugins['syntaxhl'] = array(
'path' => $editor['library path'] .'/plugins/syntaxhl',
'extensions' => array('syntaxhl' => t('Syntax Highlighter')),
'buttons' => array('syntaxhl' => t('Syntax Highlighter')),
'url' => 'http://github.com/RichGuk/syntaxhl/tree/master',
'internal' => TRUE,
'load' => TRUE,
);

Your code should now look like this:

    $plugins['safari'] = array(
      'path' => $editor['library path'] .'/plugins/safari',
      'extensions' => array('safari' => t('Safari compatibility')),
      'url' => 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/safari',
      'internal' => TRUE,
      'load' => TRUE,
    );
    $plugins['syntaxhl'] = array(
      'path' => $editor['library path'] .'/plugins/syntaxhl',
      'extensions' => array('syntaxhl' => t('Syntax Highlighter')),
      'buttons' => array('syntaxhl' => t('Syntax Highlighter')),
      'url' => 'http://github.com/RichGuk/syntaxhl/tree/master',
      'internal' => TRUE,
      'load' => TRUE,
    );
  }
  return $plugins;
}

Enable the plugin in Drupal

Now that tiny knows about the plugin, we have to enable it in drupal. Go to admin/settings/wysiwyg/profile and click edit next to the input format you are using. Under the Buttons and plugins section you should now see a 'Syntax Highlighter section. Enable that and save.

You should now be able to insert code into your tinyMCE textareas. Note: During editing, you will only see a preformatted text box. You won't see a proper code box until you save and view the node

Problems

I have not been able to successfully edit these code blocks after the initial insert. If I find a fix for this, I will update this article.

UPDATE: I've written a new version of this article that should be followed instead of this slightly-dated version.