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 06, 2008 7:14 AM by nawaf227
Filed under: ,

Comments

# SyntaxHighlighter Plug-in for Tinymce 3.X WYSIWYG Editor

Friday, April 11, 2008 4:08 AM by Nawaf's Blog

SyntaxHighlighter Plug-in for Tinymce 3.X is ready now. I don’t know why tinymce development team had

# el syntax

Thursday, May 08, 2008 6:24 AM by el syntax

Pingback from  el syntax

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Thursday, May 22, 2008 5:08 PM by Aaron

Its not working for me because its conflicting with other code in my site and thats probably whats going on for everyone else.

I am using Prototype and Scriptaculous.

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Tuesday, June 24, 2008 11:50 AM by bulldog

Thanks  works in dragonfly cms

just had to use jquery to load

$(document).ready(function() {

dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';

dp.SyntaxHighlighter.HighlightAll('code');

});

# what is the use of java in servers

Thursday, July 10, 2008 7:52 PM by what is the use of java in servers

Pingback from  what is the use of java in servers

# Google Code Highlighter

Tuesday, October 28, 2008 9:39 AM by Shawson's Code Blog

Google Code Highlighter

# 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

Thursday, December 18, 2008 7:40 AM by ctl00$main$ctl07$ctl02$ctl02$ctl02$tbname

opportunity ameriplan business <a href= forums.creativecow.net/.../124992 >opportunity business ameriplan</a> [url=forums.creativecow.net/.../124992]opportunity business ameriplan[/url]

# re: SyntaxHighlighter Plugin for Tinymce WYSIWYG Editor

Saturday, February 14, 2009 3:00 AM by Joe

When editing a field that has the code textarea in it the text is showing up out side of the textarea and is not editable.

Image: www.nativelocations.com/Capture.JPG

The text "Javascript Code" is supposed to be in the textarea under the code block. this the source code:

<textarea name="htext" id="htext" class="required" rows="10" cols="60"><p><textarea name="code" class="javascript" cols="40" rows="5">SyntaxHighlighter Plugin if (typeof(tinyMCE) != 'undefined' &amp;&amp; tinyMCE.getInstanceById(fd.elements[i].id) != null) {<br /> qs += fd.elements[i].name +  '=' + escape(tinyMCE.get(fd.elements[i].id).getContent()) + '&amp;';<br /> } else {<br /> qs += fd.elements[i].name +  '=' + escape(fd.elements[i].value) + '&amp;';<br /> }</textarea> </p><br /><p>Javascript Code</p></textarea>

Any idea why that would happen?

# 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

# Google Code Highlighter &laquo; Shawson&#8217;s Code Blog

Thursday, April 09, 2009 4:23 PM by Google Code Highlighter « Shawson’s Code Blog

Pingback from  Google Code Highlighter &laquo;  Shawson&#8217;s Code Blog

Leave a Comment

(required) 
(required) 
(optional)
(required)