SyntaxHighlighter Plug-in for Tinymce 3.X WYSIWYG Editor

SyntaxHighlighter Plug-in for Tinymce 3.X is ready now. I don’t know why tinymce development team had to change the way of writing plug-in for the tinymce, they say it’s more modular.  What bothered me really is that there is no backward compatibility. That’s you must upgrade (Actually it’s rather migrate) your plug-in to the new way.

Anyway, I have upgraded the plug-in I talked about here, to work on tinymce 3.x. To get it running on your site please use the attached file in this post and follow the same instructions on this blog entry.


Hope this helps

Published Thursday, April 10, 2008 11:55 AM by nawaf227
Filed under: , ,

Comments

# rascunho » Blog Archive » links for 2008-04-11

Friday, April 11, 2008 4:34 PM by rascunho » Blog Archive » links for 2008-04-11

Pingback from  rascunho  » Blog Archive   » links for 2008-04-11

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

Friday, April 18, 2008 5:06 AM by dexa

Hey, i just tryed your plugin. for me it does not work at all .. neither when i integrate your (bold) settings into my tinymce nor when i use your complete settings.

is there anything more do to then editing the settings and pasting your folder into the plugins folder of tinymce?

thx for help :)

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

Friday, April 18, 2008 7:22 AM by nawaf227

Hi,

Thank you for trying the plug-in. What tinymce version do you use?

Anyway i have prepared examples for both tinymce 2.x here weblogs.asp.net/.../Example_2.x.zip  and tinymce 3.x  here weblogs.asp.net/.../Example_3.x.zip

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

Sunday, April 20, 2008 6:02 AM by coolchevy

your examples do not work :(((

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

Sunday, April 20, 2008 10:59 AM by nawaf227

They do work, but I have not include the SyntaxHighlighter, you need to install it.

Can you tell me what exactly the problem, so I can help.

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

Thursday, April 24, 2008 1:47 PM by Rui Pinheiro

The examples work but require some work because of UPPER/lowercase characters.

For instance, change:

theme_advanced_buttons3_add_before : "tablecontrols,CodeHighlighting"

to:

theme_advanced_buttons3_add_before : "tablecontrols,codehighlighting"

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

Friday, April 25, 2008 2:53 AM by nawaf227

Ok, I made the same example online here

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

Linux is case a sensitive, so you may need to make the name as lowercase

For people who will insist that it doesn’t work, here is a snapshot  :)

weblogs.asp.net/.../tinymce3.xplugin.jpg

Also the online example is here for download (it includes all the necessary files tinymce + dp.SyntaxHighlighter + plugin)

weblogs.asp.net/.../Example_3.x.full.zip

Hope this helps

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

Thursday, June 12, 2008 5:25 PM by feelexit

can you check my code, I add the plugin, but its not showing up on my editor.  if you have time please look at my code ,see if i did something wrong.

thank you.

<script type="text/javascript">

 tinyMCE.init({

   mode : "exact",

   theme : "advanced",

   relative_urls : false,

   document_base_url : "/drupal/",

   language : "en",

   safari_warning : false,

   entity_encoding : "raw",

   verify_html : false,

   preformatted : false,

   convert_fonts_to_spans : true,

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

   remove_linebreaks : false,

   apply_source_formatting : true,

   theme_advanced_resize_horizontal : false,

   theme_advanced_resizing_use_cookie : false,

   plugins : "blockquote,CodeHighlighting",

   theme_advanced_toolbar_location : "top",

   theme_advanced_toolbar_align : "left",

   theme_advanced_path_location : "bottom",

   theme_advanced_resizing : true,

   theme_advanced_blockformats : "p,address,pre,h1,h2,h3,h4,h5,h6",

   theme_advanced_buttons1 : "bold,italic,underline,strikethrough,justifyleft,justifycenter,link,image,code,blockquote,CodeHighlighting",

   theme_advanced_buttons2 : "",

   theme_advanced_buttons3 : "",

   content_css : "/drupal/sites/all/themes/mytheme/style.css",

   elements : "edit-body"

 });

</script>

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

Friday, June 13, 2008 1:16 AM by nawaf227

Hi feelexit,

You are using the mode :"exact"

You either need to use mode : "textareas"  or you can still use the mode:"exact" but then you need to mention the element id like elements : "WYSIWYG", the example attached has a texarea element with id="WYSIWYG".

Hope this helps

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

Thursday, July 03, 2008 8:41 AM by Aditya

Hi, I installed this plugin to test on my computer which has apache installed. It worked fine with Joomla. But when i did the exact same thing at my server, which also runs Apache, the icon didnt show up? What could be the reason?

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

Thursday, July 03, 2008 5:40 PM by nawaf227

Hi Aditya,

Can you give me a sample of what you did?

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

Friday, July 04, 2008 3:09 AM by Aditya

Ya sure,

This is what my tinymce.init function looked like

<script type="text/javascript">

tinyMCE.init({

theme : "$theme",

language : "en",

mode : "textareas",

document_base_url : "$mosConfig_live_site/",

relative_urls : $relative_urls,

remove_script_host : false,

save_callback : "TinyMCE_Save",

invalid_elements : "$invalid_elements",

theme_advanced_toolbar_location : "$toolbar",

theme_advanced_source_editor_height : "$html_height",

theme_advanced_source_editor_width : "$html_width",

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

               remove_linebreaks : false,

directionality: "$text_direction",

force_br_newlines : "$br_newlines",

force_p_newlines : "$p_newlines",

$content_css

debug : false,

cleanup : $cleanup,

cleanup_on_startup : $cleanup_startup,

safari_warning : false,

plugins : "advlink,CodeHighlighting, advimage, $plugins",

theme_advanced_buttons2_add : "$buttons2",

theme_advanced_buttons3_add : "$buttons3,CodeHighlighting",

plugin_insertdate_dateFormat : "$format_date",

plugin_insertdate_timeFormat : "$format_time",

plugin_preview_width : "$preview_width",

plugin_preview_height : "$preview_height",

extended_valid_elements : "a[name|href|target|title|onclick], img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], $elements",

disk_cache : true,

debug : false,

fullscreen_settings : {

theme_advanced_path_location : "top"

}

});

And I added the codeplugin folder to my TinyMCE plugin folder. I am using TinyMCE 2.1.2(on Joomla). I even tried TinyMCE editor 3, but again it showed only on my computer's installation and not my website!

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

Friday, July 04, 2008 4:43 AM by nawaf227

Hi,

Your sample has lot's of $variables, so I couldn't test it. All I can think of right now is the Theme. Try to use the advanced theme and check.

Please let me know if this solves your problem.

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

Friday, July 04, 2008 4:45 AM by nawaf227

For tinymce 2.x please use this

weblogs.asp.net/.../syntaxhighlighter-plugin-for-tinymce-wysiwyg-editor.aspx

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

Friday, July 04, 2008 7:21 AM by Aditya

Yes i used the codehighlighter for TinyMCE 2. I am also confused, why for the same init function, it works at one place and not the other!

               theme : "advanced",

language : "en",

mode : "specific_textareas",

relative_urls : true,

remove_script_host : false,

save_callback : "TinyMCE_Save",

invalid_elements : "applet",

theme_advanced_toolbar_location : "top",

theme_advanced_source_editor_height : "550",

theme_advanced_source_editor_width : "750",

directionality: "ltr",

force_br_newlines : "false",

force_p_newlines : "true",

debug : false,

cleanup : false,

cleanup_on_startup : false,

safari_warning : false,

plugins : "advlink, CodeHighlighting,advimage, , preview, searchreplace, insertdatetime, emotions, advhr, flash, table, fullscreen, layer, style, visualchars, media, nonbreaking",

theme_advanced_buttons2_add : ", preview, search,replace, insertdate, inserttime, emotions, insertlayer, moveforward, movebackward, absolute",

theme_advanced_buttons3_add : ", advhr, flash, tablecontrols, fullscreen, styleprops, visualchars, media, nonbreaking,CodeHighlighting",

plugin_insertdate_dateFormat : "%Y-%m-%d",

plugin_insertdate_timeFormat : "%H:%M:%S",

plugin_preview_width : "750",

plugin_preview_height : "550",

remove_linebreaks : false,

extended_valid_elements : "a[name|href|target|title|onclick], textarea[name|class|cols|rows], img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], , hr[class|width|size|noshade]",

disk_cache : true,

debug : false,

As you can see, I m using advanced theme already. Are there any other reason for which plugins might not show up in TinyMCE editor due to conflicts?

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

Friday, July 04, 2008 7:45 AM by nawaf227

Hi Aditya,

Can I access your site? I will try to debug it using Firebug.

Regards

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

Friday, July 04, 2008 9:26 AM by Aditya

Ok sure. I can send you the login details of my site that runs on Joomla. What rights would you require to debug, so that I can create your seperate account? Also, kindly give me your email account, so that the details are safe

Thanks & Regards

Aditya.

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

Friday, October 24, 2008 9:29 AM by osdave

hi nawaf,

Firstavail, thanks for this plugin :=)

Unfortunately I can't manage to get it work. When I load the blog with tinymce, the tinymce dosen't load and the webdevelopper error console says:

"Illegal character ï>>¿/**"

(without the quotes)

it looks like a encodification problem to me, but I can't solve it. I tried to eliminate the comment with your name (acording to the console it's where the problem is) but I had no luckkkkkkk.

Any thoughts?

thanks anyway for your time

cheers

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

Friday, October 24, 2008 3:26 PM by nawaf.albadia

Hi

Can you please post a sample of your code.

Did you try this one. It's basic example (it includes all the necessary files tinymce + dp.SyntaxHighlighter + plugin)

weblogs.asp.net/.../Example_3.x.full.zip

Please let me know if this help you solve your problem

Regards

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

Saturday, October 25, 2008 12:43 PM by osdave

hi Nawaf, thanx for answering, and sorry for wasting your time.

I am an idiot: I am using version 2 of tinymce...

I downloaded your plugin for this version and it works like a charm.

I'll try to be smarter next time :)

cheers

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

Saturday, October 25, 2008 2:59 PM by nawaf.albadia

Dear osdave,

Never say that,

Actually these type of mistakes only smart people fill into.

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

Monday, January 05, 2009 4:48 PM by Victory

Hello Thank you for this plugin.

I am using my own blog and i am using tinyMCE for adding articles in administration page My problem is when i add multiple code highlightings and save it works but when i opened it to update there is more than one tinymce editor appears with the same number of code highlighted i mean for each code highlightings there appears the same number of tinymce editor where there should be only once. I think the problem is tinyMCE uses textareas and syntaxhighlighter uses textareas too. What can be the solution, can i use <pre> tag instead of textareas in your plugin ? Please reply to me ass soon as possible

By the way i am using the latest version of both.

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

Tuesday, January 06, 2009 1:36 PM by nawaf.albadia

Hi Victory,

What you can do is to set the mode as mode:"exact" but then you need to mention the element id like elements : "WYSIWYG", the example attached has a texarea element with id="WYSIWYG".

Hope this helps

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

Saturday, February 14, 2009 1:19 PM by Anon

First of all, thanks for all you work.

Secondly I wonder if it should highlight within TinyMCE or only on the output?

I got the plugin to work and it does add a <textarea> but it does not highlight inside TinyMCE as I hopped it will do.

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

Wednesday, March 18, 2009 1:30 PM by shahin

thanks very much :O)

# SyntaxHighlighter Wrapper CSModule 1.1

Sunday, March 22, 2009 6:20 AM by 技術論壇

在之前 dp.SyntaxHighlighter 遇上 CommunityServer ,後來在使用上覺得有點小問題,貼上去後會多一行空白,來點小小的修正 但如果這樣就丟出來,有點丟人現眼,順道把自己暗藏的

# SyntaxHighlighter Wrapper CSModule 1.1

Sunday, March 22, 2009 11:47 PM by 技術論壇

在之前 dp.SyntaxHighlighter 遇上 CommunityServer ,後來在使用上覺得有點小問題,貼上去後會多一行空白,來點小小的修正 但如果這樣就丟出來,有點丟人現眼,順道把自己暗藏的

# SyntaxHighlighter Wrapper CSModule 1.1

Wednesday, April 22, 2009 11:39 PM by Community Server

在之前 dp.SyntaxHighlighter 遇上 CommunityServer ,後來在使用上覺得有點小問題,貼上去後會多一行空白,來點小小的修正 但如果這樣就丟出來,有點丟人現眼,順道把自己暗藏的

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

Thursday, June 11, 2009 6:17 PM by Jeff C

Does this plug-in work with the latest SyntaxHighlighter 2.0?

alexgorbatchev.com/.../SyntaxHighlighter

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

Friday, June 12, 2009 7:17 AM by nawaf.albadia

Hi Jeff,

I have not really tried to test it. May be you could test it and tell us :)

Thanks

# Codehighlighting do TinyMCE | spuavick

Friday, July 10, 2009 5:16 PM by Codehighlighting do TinyMCE | spuavick

Pingback from  Codehighlighting do TinyMCE | spuavick

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

Friday, October 09, 2009 5:25 AM by Matt M

Hi, thanks for this great article.

Does anybody know how to get it working within the b2Evolution framework?

The extra layer of complexity has stumped me.

Thanks!

Matt

Leave a Comment

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