Posts Tagged ‘plugins’

I went to intergrate Syntaxhighlighter into the site tonight, something I’d forgotten to do in the redesign and I thought it would be nice if I could just click a button in tinymce and paste in the code, select a few options and click insert. Which of course is entirely possible so I’ve written a tinymce plugin to do just that.

I did encounter one little bug writing the plugin. When inserting the pasted code it keept repeating itself if there was currently no content in the body of the textarea (tinymce). I finally managed to fix it by putting a space at the end of the variable I was trying to insert (and with the power of highlighting here’s what that looked like).

textarea_output += '</textarea> '; /* Note space */
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);

You can download the plugin here:

  syntaxhl.rar (5.1 KiB, 245 hits)

  syntaxhl.tar.gz (4.6 KiB, 252 hits)

  syntaxhl.zip (5.7 KiB, 284 hits)

UPDATE: The project has been moved to github, this is the preferred way of obtaining the files. I will leave the old download links up for now. Also feel free to fork, modify and send pull request with changes to the project… improvements are always welcome.

http://github.com/RichGuk/syntaxhl/tree/master

Getting it to work

First you need to download Syntaxhighlighter and get that working by including the CSS file and Javascript files. I combind all of the syntaxhighlighter javascript files into one on 27smiles, you can get it here.

Extract the plugin

Next you need to extract the plugin to your tinymce plugin directory. When extracted it should be something like this:
/path/to/tinymce/plugins/syntaxhl

Configure tinymce

Finally we need to configure tinymce to use our plugin we also need to stop tinymce from stripping out <textarea></textarea> html tags as this is needed for Syntaxhighlighter.

tinyMCE.init({
theme : "advanced",
plugins : "syntaxhl",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code, syntaxhl",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
remove_linebreaks : false,
extended_valid_elements : "textarea[cols|rows|disabled|name|readonly|class]"
});

We tell tinymce to use our plugin by adding syntaxhl to the plugins list and also adding the sytnaxhl button to the buttons list also note that extended_valid_elements contains the textarea tag this tells tinymce to not remove it.

If all went well you should see a new highlighter icon button in tinymce and when you click it you should get a dialog popup allowing you to insert code into your content.

If you encounter any bugs or have any problems getting it to work please contact me I’d be happy to help/fix bugs. Please note that I’ve only briefly tested this on Safari/IE7/Firefox 2/Firefox 3b5 and a quick blast on IE6 and from first tests it seemed to work. Also I was unsure if you have to stick to any standards when writing plugin’s for tinymce so it might not be the correctly way of doing it.