SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

SyntaxHighlighter is an incredible code syntax highlighting tool. It's 100% Java Script based and it doesn't care what you have on your server.  I believe any IT blog should have it. I needed to use this tool in my site, I use tinymce WYSIWYG, so I said this tool must work on tinymce.

Geoff Bowers pointed out that you need to wrap the code inside textarea . I quote this from his blog

“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"

Since I can’t ask my site visitors to add the code every time they post a snippet of a code, so I wrote a plug-in for tinymce. This plug-in works only on tinymce 2.X. I will work to provide support for tinymce 3.X very soon.  To get it working you need first to download  SyntaxHighlighter and then follow the installation steps. Then follow extract the attached file into the tinymce plugins folder. Then in the tinymce init function make sure you include the Bold lines.

<script language="javascript" type="text/javascript">
 tinyMCE.init({
 mode : "textareas",
 theme : "advanced",
 theme_advanced_toolbar_location : "top",
 auto_resize:false,
 extended_valid_elements: "textarea[name|class|cols|rows]",  
    remove_linebreaks : false,

 width:720,
    plugins : 'preview,codehighlighting',
    theme_advanced_toolbar_align : "right",
    theme_advanced_buttons1_add : " fontselect,fontsizeselect,zoom",
    theme_advanced_buttons2_add : "preview,separator,forecolor,backcolor",
    theme_advanced_buttons3_add_before : "tablecontrols, codehighlighting"
   
});
</script>

This is the popup screen for the CodeHighlighting  plugin.

Hope this helps

Published Sunday, April 6, 2008 7:14 AM by nawaf227
Filed under: ,

Comments

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Tuesday, November 18, 2008 4:11 AM by illusive

Thanx!!!

P.S. What about editing already inserted code?

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Tuesday, November 18, 2008 12:17 PM by nawaf.albadia

Hi illusive,

To edit the code just double click on the box area and it will allow you to edit.

Hope this helps

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Saturday, February 14, 2009 6:32 PM by Joe

Also if you double click on the textarea (where the higlighted code is) in FF it highlights all the code and if you try to edit it removes all the code. So basically once it is submitted it is uneditable?

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Monday, February 16, 2009 9:40 PM by Joe

No response? A little help would be appreciated.....

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Tuesday, February 17, 2009 8:18 AM by nawaf.albadia

Hi Joe,

Sorry for being late on you. I'm working these days to establish my own IT company :) that's why I did not have time to respond.

Can you please check this example I have made

www.mostasharok.net/.../index.html

and see if you can get the same problem, and let me know please

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Tuesday, February 17, 2009 1:50 PM by Joe

The problem is after you have saved the data into MYSQL and then come back to edit it. Upon editing any content NOT in the code textarea is not editable.

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Tuesday, February 17, 2009 2:12 PM by Joe

I set up a quick example of saving the textarea and going back to edit it so you could see the issue. I don't want to post the URL here so do you have an email address I can send it to?

Thanks.

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Tuesday, February 17, 2009 3:31 PM by nawaf.albadia

Yes sure, nawaf227 on yahoo mail

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Tuesday, July 14, 2009 7:12 PM by haolan

Hi..

I have tryed your plugin, but i keep getting this error:

tinyMCE.importPluginLanguagePack is not a function

editor_plugin_src.js?1246286868()

Can you help me solve this?

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Thursday, August 6, 2009 2:37 AM by Greg

Nice plugin. Going to try it now :)

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Monday, December 28, 2009 9:21 AM by ravesoft

Hi

thank you to your great point, when i'm try to load your sample, i just see blank page.

please help to me

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Sunday, March 21, 2010 5:59 PM by burakg

Much thanx, your plugin really saved my time :)