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

# Tékka á þessu á morgun http://weblogs.asp.net/nawaf/archive/2008/04/10/syntaxhighlighter-plug-in-for-tinymce-3-x-wysiwyg-editor.aspx

Tuesday, March 02, 2010 8:49 PM by Twitter Mirror

Tékka á þessu á morgun http://weblogs. asp.net /nawaf/archive/2008/04/10/syntaxhighlighter-plug-in-for

# SyntaxHighlighter, TinyMCE et YML

Friday, July 02, 2010 8:41 AM by SyntaxHighlighter, TinyMCE et YML

Pingback from  SyntaxHighlighter, TinyMCE et YML

# Make Your Own TinyMCE Image Uploader | DnT ~ ?????????

Sunday, October 10, 2010 10:31 AM by Make Your Own TinyMCE Image Uploader | DnT ~ ?????????

Pingback from  Make Your Own TinyMCE Image Uploader | DnT ~ ?????????

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

Friday, January 13, 2012 7:01 AM by karthi

Super. Nice Plugin. Thanks nawaf227. :)  :)  :)

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

Tuesday, January 31, 2012 7:04 AM by Jan

Hi,

for some reason tinymce keeps replacing <?php and ?> (php open and close tags) with html ascii codes. example:

<textarea name="code" class="php" cols="50" rows="20">&lt;?php

echo "test";

?&gt;</textarea>

should be:

<textarea name="code" class="php" cols="50" rows="20"><?php

echo "test";

?></textarea>

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

Wednesday, January 09, 2013 8:18 PM by bcfffduthp@gmail.com

Not so stylish, but really fashion. Timberland boot is a nice brand always presist the nature line without are sorry for and exaggeration. What they want to spell out is the nature feeling which could not find in hustle and bustle of the city.

canada goose oslo canadagoosenorge.8ewebs.com

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

Wednesday, March 06, 2013 2:20 PM by zwojuaml@gmail.com

car il prend facilement en charge nimporte quel type et le type de carte Micro SD! ores et déjà disponible sur un site Internet dédié en précommande à 160 dollars 120 euros avec la version du jeu de son choix ou seulement 100 dollars sans cette dernière. DS Browser Soutien de modifications du fond d &lsquo ! Elle est fabriquée par ?l’Original r4 et l’original Dstt ! portable et appareil photographique Soutenir?clean rom et?drag &amp . enrter autolatiquement dans le mode optimisé Double UI éran avec des ic?nes?

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

Sunday, March 10, 2013 12:30 AM by qqvtui@gmail.com

et a confirmé la date de sortie du 11 Avril 2013! où un fossé entre les univers a causé le chaos et la terreur indicible. le géant du jeu vidéo lancé la Nintendo 3DS console portable qui permet aux utilisateurs de visualiser les graphiques 3D sans aucune aide visuelle ! sauvegardez le fichier de sauvegarde directement sur la carte microSD · Support Homebrew ! un énorme side-scrolling monde ouvert avec la haute définition . vous pouvez utiliser une des cartes de haute capacité 4 Go?

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

Monday, March 18, 2013 11:34 PM by Wiley

I love what you guys tend to be up too. This sort of clever work and

exposure! Keep up the wonderful works guys I've incorporated you guys to our blogroll.

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

Wednesday, April 24, 2013 7:07 AM by Dietz

SOURCE : State reviews boy's death - David Migoya - Denver Post. Finally, it can be said that finding a suitable sell car company is the most convenient way to make instant cash from junk car Orlando. Are they kept for surplus supplies for Apocalypse 2012, or are they really thrown away as the TSA claims.

Leave a Comment

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