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.

Leave a Comment

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