Tobias
10-03-2006, 02:33 PM
Hello,
this is a re-post of a posting I put in August 8, 2006 which was lost with the recent downtime of SD.org. Thanks to Brent of SD for pointing out the Google cache page of it. :D
For the question on how to add support for "codeblocks" inside the Article/News TinyMCE editor, I followed a suggested link for a special plugin and finally got it to work.
This is a compilation of required steps for installing and configuring the TinyMCE plugin (nothing to do with SD plugins) called "insertcode". I'm in no way involved with the files/code being used, so should there be any problems with TinyMCE's appearance etc. please contact the corresponding authors.
The SD-related code patch (only one) was tested with SD 2.3.5.
Important to note:
In order to make Tiny really appear, the required attribute within the "<textarea...>" tag is wysiwyg="true". Writing wysiwyg="1" will not work.
Example with optional col and rows parameters for illustration:
<textarea name="somename" width="100%" cols="80" rows="6" wysiwyg="true" value="">
blah blah
<textarea>
1. Downloads
There are 2 non-SD packages to be downloaded first:
"insertcode" plugin for TinyMCE
This is an open source plugin hosted on sourceforge.net and can be downloaded (it is a RAR archive, so you need a capable unpacker for it, too, e.g. WinRAR) here:
http://sourceforge.net/tracker/download.ph...040&aid=1409990
"GeSHi" - Generic Syntax Highlighter (used by above plugin)
This quite special tool is also open source and is hosted on sourceforge, too. The homepage of it is http://geshi.org/.
The current stable version is available for download here:
http://prdownloads.sourceforge.net/geshi/G...12.zip?download
2. Unpacking/Uploading
Each above archive contains its contents within multiple directories, so make sure to extract with paths!
Depending on your work methods, you may extract in a special download folder (staging folder) or in the correct locations on a local directory mirror of your website (assuming you develop with a webserver on a local machine).
For my below examples I will just assume that Subdreamer is installed in a folder "subd" in your htdocs's root folder so adapt the path to your environment. Whereas "geshi" only contains Ascii files, the "insertcode" archive contains one binary file (gif), so keep that in mind when uploading.
a. "insertcode.rar" archive
This archive with it's "insertcode" directory has to be extracted/copied to the folder
/subd/admin/tiny_mce/plugins/
resulting in:
/subd/admin/tiny_mce/plugins/insertcode/
b. "GeSHi-1.0.7.12.zip" archive
I think the safest place for it to extract (with paths) is in Subdreamers "admin" folder:
/subd/admin/
resulting in:
/subd/admin/geshi/
(Note that this archive has 2 geshi directories!)
3. Configuring "insertcode" plugin
Whereas "geshi" (not Sushi! tongue.gif ) needs no further configuration, the plugin needs some more steps or it just won't show the correct results with TinyMCE.
Copy the file "insertcode.css" to /subd/admin/styles/advanced/
Open file /subd/admin/adminfunctions.php and search for the following lines (around 55):
IMPORTANT: the forum editor screws up the original code when lines are too long. When pasting below code into your editor, lines should NOT contain line breaks, so please remove those manually then.
echo '<script language="javascript" type="text/javascript">
tinyMCE.init({
cleanup : true,
auto_cleanup_word : true,
language: "en",
verify_html : false,
relative_urls : true,
document_base_url : "' . $sdurl . '",
remove_script_host : false,
mode : "specific_textareas",
textarea_trigger : "wysiwyg",
theme : "advanced",
theme_advanced_layout_manager : "SimpleLayout",
plugins:"advhr,advimage,advlink,contextmenu,flash,imagemana ger,
insertdatetime,print,searchreplace,smilies,style,t able",
theme_advanced_buttons1:"code,print,separator,formatselect,fontselect,
fontsizeselect,separator,forecolor,backcolor,bold, italic,underline,
styleprops,removeformat",
theme_advanced_buttons2:"justifyleft,justifycenter,justifyright,justifyfull ,
separator,bullist,numlist,separator,search,replace ,separator,inserttime,
insertdate,separator,charmap,smilies,flash,advhr,l ink,unlink,image,
imagemanager",
theme_advanced_buttons3 : "tablecontrols,visualaid",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "iframe[frameborder|align|height|
longdesc|marginheight|marginwidth|name|scrolling|s rc|width],
a[name|href|target|title|onclick],img[class|src|border=0|alt|title|
hspace|vspace|width|height|align|onmouseover|onmou seout|name|style],
hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
</script>';
Replace above code block with this:
echo '<script language="javascript" type="text/javascript">
tinyMCE.init({
cleanup : true,
auto_cleanup_word : true,
language: "en",
verify_html : false,
relative_urls : true,
document_base_url : "' . $sdurl . '",
remove_script_host : false,
mode : "specific_textareas",
textarea_trigger : "wysiwyg",
theme : "advanced",
theme_advanced_layout_manager : "SimpleLayout",
content_css : "'.$admindir.$stylepath.'insertcode.css",
plugins : "advhr,advimage,advlink,contextmenu,insertcode,inse rtdatetime,
print,searchreplace,smilies,style,table",
theme_advanced_buttons1 : "code,print,separator,formatselect,fontselect,fonts izeselect,
separator,forecolor,backcolor,bold,italic,underlin e,
styleprops,removeformat",
theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull ,separator,
bullist,numlist,separator,search,replace,separator ,inserttime,insertdate,
separator,charmap,smilies,advhr,link,unlink,image",
theme_advanced_buttons3 : "insertcode,tablecontrols,visualaid",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "iframe[frameborder|align|height|longdesc|
marginheight|marginwidth|name|scrolling|src|width],a[name|href|target|title|onclick],
img[class|src|border=0|alt|title|hspace|vspace|width|h eight|align|onmouseover|
onmouseout|name|style],hr[class|width|size|noshade],font[face|size|color|style],
span[class|align|style]"
});
</script>';
Save and upload the file as well.
Changes in above code block take care of e.g. enlisting "insertcode" as a plugin, make a new toolbar button for it to show up and tell it where to find it's CSS file. The buttons symbol looks like a big "C"!
You have to first click the button where you then have the possibility to paste the code you would like to have inserted as highlighted code. You may also choose a language different from PHP for highlighting.
Open file /subd/admin/tiny_mce/plugins/insertcode/config.php in an editor
Change the first "define" to contain the full path to the previously extracted "geshi" folder (where "geshi.php" resides in!) and (re-)upload the file again
For testing now open up the "Main Plugins" | "Articles" section and create a new article (with WYSIWIG enabled in the "Main Settings"). In the toolbars now a new button like a big "C" should be visible.
Click it, paste some PHP code in the dialog and click on "Insert". Then you should see a pretty colorful output.
If, however, the output is mostly black and e.g. only "echo" appears in blue, then something is wrong. Most likely the "config.php" has not the correct full path to "geshi", so you might have to try it with a different setting.
Some hints about Tiny:
The "Init" code says that it only should activate wysiwyg when finding specific textareas (mode)
the triggering keyword a textarea tag has to contain is "wysiwyg" (textarea_trigger)
each listed plugin has to exist in the same named directory in the "plugins" subfolder unter Tiny's directory
[/list]
However, specific to SD you have to pass either a POST or GET variable "loadwysiwyg=1" to your forms (submit action or links).
The "<textarea...>" tag on your form has to include wysiwyg="true" as argument.
Mass Media Pro Plugin - Live Demo : Mass Media Pro (http://www.sddepot.com/mass_media/)
My SDDepot Blog (http://www.sddepot.com/community/blog/tobias/) - SDDepot - Skins and Plugins (http://www.sddepot.com/)
this is a re-post of a posting I put in August 8, 2006 which was lost with the recent downtime of SD.org. Thanks to Brent of SD for pointing out the Google cache page of it. :D
For the question on how to add support for "codeblocks" inside the Article/News TinyMCE editor, I followed a suggested link for a special plugin and finally got it to work.
This is a compilation of required steps for installing and configuring the TinyMCE plugin (nothing to do with SD plugins) called "insertcode". I'm in no way involved with the files/code being used, so should there be any problems with TinyMCE's appearance etc. please contact the corresponding authors.
The SD-related code patch (only one) was tested with SD 2.3.5.
Important to note:
In order to make Tiny really appear, the required attribute within the "<textarea...>" tag is wysiwyg="true". Writing wysiwyg="1" will not work.
Example with optional col and rows parameters for illustration:
<textarea name="somename" width="100%" cols="80" rows="6" wysiwyg="true" value="">
blah blah
<textarea>
1. Downloads
There are 2 non-SD packages to be downloaded first:
"insertcode" plugin for TinyMCE
This is an open source plugin hosted on sourceforge.net and can be downloaded (it is a RAR archive, so you need a capable unpacker for it, too, e.g. WinRAR) here:
http://sourceforge.net/tracker/download.ph...040&aid=1409990
"GeSHi" - Generic Syntax Highlighter (used by above plugin)
This quite special tool is also open source and is hosted on sourceforge, too. The homepage of it is http://geshi.org/.
The current stable version is available for download here:
http://prdownloads.sourceforge.net/geshi/G...12.zip?download
2. Unpacking/Uploading
Each above archive contains its contents within multiple directories, so make sure to extract with paths!
Depending on your work methods, you may extract in a special download folder (staging folder) or in the correct locations on a local directory mirror of your website (assuming you develop with a webserver on a local machine).
For my below examples I will just assume that Subdreamer is installed in a folder "subd" in your htdocs's root folder so adapt the path to your environment. Whereas "geshi" only contains Ascii files, the "insertcode" archive contains one binary file (gif), so keep that in mind when uploading.
a. "insertcode.rar" archive
This archive with it's "insertcode" directory has to be extracted/copied to the folder
/subd/admin/tiny_mce/plugins/
resulting in:
/subd/admin/tiny_mce/plugins/insertcode/
b. "GeSHi-1.0.7.12.zip" archive
I think the safest place for it to extract (with paths) is in Subdreamers "admin" folder:
/subd/admin/
resulting in:
/subd/admin/geshi/
(Note that this archive has 2 geshi directories!)
3. Configuring "insertcode" plugin
Whereas "geshi" (not Sushi! tongue.gif ) needs no further configuration, the plugin needs some more steps or it just won't show the correct results with TinyMCE.
Copy the file "insertcode.css" to /subd/admin/styles/advanced/
Open file /subd/admin/adminfunctions.php and search for the following lines (around 55):
IMPORTANT: the forum editor screws up the original code when lines are too long. When pasting below code into your editor, lines should NOT contain line breaks, so please remove those manually then.
echo '<script language="javascript" type="text/javascript">
tinyMCE.init({
cleanup : true,
auto_cleanup_word : true,
language: "en",
verify_html : false,
relative_urls : true,
document_base_url : "' . $sdurl . '",
remove_script_host : false,
mode : "specific_textareas",
textarea_trigger : "wysiwyg",
theme : "advanced",
theme_advanced_layout_manager : "SimpleLayout",
plugins:"advhr,advimage,advlink,contextmenu,flash,imagemana ger,
insertdatetime,print,searchreplace,smilies,style,t able",
theme_advanced_buttons1:"code,print,separator,formatselect,fontselect,
fontsizeselect,separator,forecolor,backcolor,bold, italic,underline,
styleprops,removeformat",
theme_advanced_buttons2:"justifyleft,justifycenter,justifyright,justifyfull ,
separator,bullist,numlist,separator,search,replace ,separator,inserttime,
insertdate,separator,charmap,smilies,flash,advhr,l ink,unlink,image,
imagemanager",
theme_advanced_buttons3 : "tablecontrols,visualaid",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "iframe[frameborder|align|height|
longdesc|marginheight|marginwidth|name|scrolling|s rc|width],
a[name|href|target|title|onclick],img[class|src|border=0|alt|title|
hspace|vspace|width|height|align|onmouseover|onmou seout|name|style],
hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
</script>';
Replace above code block with this:
echo '<script language="javascript" type="text/javascript">
tinyMCE.init({
cleanup : true,
auto_cleanup_word : true,
language: "en",
verify_html : false,
relative_urls : true,
document_base_url : "' . $sdurl . '",
remove_script_host : false,
mode : "specific_textareas",
textarea_trigger : "wysiwyg",
theme : "advanced",
theme_advanced_layout_manager : "SimpleLayout",
content_css : "'.$admindir.$stylepath.'insertcode.css",
plugins : "advhr,advimage,advlink,contextmenu,insertcode,inse rtdatetime,
print,searchreplace,smilies,style,table",
theme_advanced_buttons1 : "code,print,separator,formatselect,fontselect,fonts izeselect,
separator,forecolor,backcolor,bold,italic,underlin e,
styleprops,removeformat",
theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull ,separator,
bullist,numlist,separator,search,replace,separator ,inserttime,insertdate,
separator,charmap,smilies,advhr,link,unlink,image",
theme_advanced_buttons3 : "insertcode,tablecontrols,visualaid",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "iframe[frameborder|align|height|longdesc|
marginheight|marginwidth|name|scrolling|src|width],a[name|href|target|title|onclick],
img[class|src|border=0|alt|title|hspace|vspace|width|h eight|align|onmouseover|
onmouseout|name|style],hr[class|width|size|noshade],font[face|size|color|style],
span[class|align|style]"
});
</script>';
Save and upload the file as well.
Changes in above code block take care of e.g. enlisting "insertcode" as a plugin, make a new toolbar button for it to show up and tell it where to find it's CSS file. The buttons symbol looks like a big "C"!
You have to first click the button where you then have the possibility to paste the code you would like to have inserted as highlighted code. You may also choose a language different from PHP for highlighting.
Open file /subd/admin/tiny_mce/plugins/insertcode/config.php in an editor
Change the first "define" to contain the full path to the previously extracted "geshi" folder (where "geshi.php" resides in!) and (re-)upload the file again
For testing now open up the "Main Plugins" | "Articles" section and create a new article (with WYSIWIG enabled in the "Main Settings"). In the toolbars now a new button like a big "C" should be visible.
Click it, paste some PHP code in the dialog and click on "Insert". Then you should see a pretty colorful output.
If, however, the output is mostly black and e.g. only "echo" appears in blue, then something is wrong. Most likely the "config.php" has not the correct full path to "geshi", so you might have to try it with a different setting.
Some hints about Tiny:
The "Init" code says that it only should activate wysiwyg when finding specific textareas (mode)
the triggering keyword a textarea tag has to contain is "wysiwyg" (textarea_trigger)
each listed plugin has to exist in the same named directory in the "plugins" subfolder unter Tiny's directory
[/list]
However, specific to SD you have to pass either a POST or GET variable "loadwysiwyg=1" to your forms (submit action or links).
The "<textarea...>" tag on your form has to include wysiwyg="true" as argument.
Mass Media Pro Plugin - Live Demo : Mass Media Pro (http://www.sddepot.com/mass_media/)
My SDDepot Blog (http://www.sddepot.com/community/blog/tobias/) - SDDepot - Skins and Plugins (http://www.sddepot.com/)