|
How to add TinyMCE on OSCommerce |
|
Written by pnyet
|
Tulisan ini menjelaskan how to dari penambahan tinyMCE editor kedalam administrasi produk, sehingga tampilan deskripsi produk sesuai dengan apa yang kita inginkan. Untuk publishing how to ini masih dalam format bahasa inggris, mungkin beberapa hari lagi akan saya posting translate dari how to nya. Artikel ini saya dapatkan dari sini dan penulisanya ada akhir artikel.
TinyMCE Wysiwyg Editor for osCommerce 2.2m2
Installation instructions compiled
By xXDesertRoseXx
************************************************
WHAT THIS CONTRIBTUION DOES
=======================
This contribution is an extremly easy mod that turns any TEXTAREA into a full flegged WYSIWYG HTML EDITOR.
Best of all, its compatible with FireFox
Developed by http://www.moxiecode.com
******************************************************************************************
INSTALLATION INSTRUCTIONS
1.) Unzip the tinymce2.0.8 and the plugins to a folder on your pc where you will find it again.
===============================================
2.) Create a folder called ' tinymce ' in the catalog/admin directory
so it should look like this
a.) http://www.yoursite.com/catalog/admin/tinymce
http://www.yoursite.com/store/admin/tinymce
or
b.) http://www.yoursite.com/admin/tinymce
or it could even look like this
c.) http://www.yoursite.com/xxxx/catalog/admin/tinymce
=================================================
3.) Go back to the where you unzipped the packages you just downloaded
and FIRST look inside the folder you downloaded at STEP 2
You should see the path look something like this
C:\path\to\your\folder\tinymce_2_0_8\tinymce
Inside the tinymce folder should be a directory called 'jscripts' and inside that, you will see another folder called tiny_mce and inside that the following:
3x Folders
1. langs
2. utils
3. themes
+ you will see 4 files
1. blank.htm
2. tiny_mce.js
3. tiny_mce.src.js
4. tiny_mce_popup.js
The plugin folder must be copied into that directory so that you have all of the above 3 folders and the 4 files + the plugin folder
PLEASE NOTE THAT IN ORDER TO VIEW THE FULL EXAMPLES FEATURED IN THE tinymce_documentation download you need to copy that folder to the jscripts folder aswell
***********************************************************************
4.)
Now you have to upload the jscripts folder containing the 4 abovementioned folders and 4 files to the tinymce folder which you created in catalog/admin.
dont get confused with the two folders called tinymce and tiny_mce
your paths should look like this
http://www.yoursite.com/catalog/admin/tinymce/jscripts/tiny_mce
***********************************************************************
5.)
Now you are going to add the code to your pages.
The same piece of javasctript is used on all the pages that you want to use the editor on.
In my case I only added it to admin/categories.php page as I was having problems with the admin/mail.php and decided against it. I may try the admin/newsletter.php section - but right now its only the adding of new products where I want to have this feature.
The following must be added between the <head></head> section of the page. So if you want to enable the editor on the 'add new products' page in admin
OPEN
catalog/admin/categories.php and between the <head></head> section copy and paste the following code.
<script language="javascript" type="text/javascript" src="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_ADMIN; ?>tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,save,autosave,autosave,cleanup,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,directionality,inlinepopups,media,nonbreaking,visualchars,devkit,paste,noneditable,layer,fullpage,fullscreen,",
theme_advanced_buttons1_add_before : "save,separator,",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,ltr,rtl",
theme_advanced_buttons4_add_before : "visualchars,nonbreaking,devkit,separator,layer,fullpage,fullscreen",
table_styles : "Header 1=header1;Header 2=header2;Header 3=header3",
table_cell_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1",
table_row_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
table_cell_limit : 100,
table_row_limit : 5,
table_col_limit : 5,
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 : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js"
});
</script>
****************************************************************************************************************************************************************
IMPORTANT NOTES - PLEASE READ THIS AS IT WILL HELP YOU UNDERSTAND THE WORKING OF THE TINYMCE EDITOR
1.) Notice the first first line of code - this is very important as it stipulates the path to the tiny_mce.js script file which is necessary for the script to work
<script language="javascript" type="text/javascript" src="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_ADMIN; ?>tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
IF YOU HAVE CHANGED THE DIRECTORY STUCTURE MAKE SURE THAT YOU CHANGE THE PATH TO THE FOLDER IN THE LINE ABOVE.
src="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_ADMIN; ?> ====== INDICATES THE PATH TO THE ADMIN DIRECTORY
tinymce/jscripts/tiny_mce/tiny_mce.js"> ===== IS THE PATH TO THE tiny_mce.js file
**************************************************************************************************************************************************
Now lets try to understand a bit more of the script itself as it controls how the editor will behave.
tinyMCE.init({ ======= this initialised the the editor
mode : "textareas", ===== this tells the editor which areas to target - in our case its the text areas - so where ever there is a textarea there will be a editor - in my case I also have the
Header Tags Controller mod installed and because the those are text areas there are editors at those fields too.
theme : "advanced", ======= this controls which editor is going to be used - Pse see the documentaton for examples of the 4 available themes - you can get a simple, advanced, full and word versions If you only want the simple version of the editor you need to change the theme to simple.
plugins : "table,save,autosave,autosave,cleanup,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,directionality,inlinepopups,media,nonbreaking,visualchars,devkit,paste,noneditable,layer,fullpage,fullscreen,xhtmlextras,",
the above line controls which plugins are to be used. here you can take out what you dont need and jsut keep what you want to have.
theme_advanced_buttons1_add_before : "save,separator,",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,ltr,rtl",
theme_advanced_buttons4_add_before : "visualchars,nonbreaking,devkit,separator,layer,fullpage,fullscreen",
the above controls how the buttons on the editor are displayed - so here you can siwith things around to suit you.
table_styles : "Header 1=header1;Header 2=header2;Header 3=header3",
table_cell_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1",
table_row_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
table_cell_limit : 100,
table_row_limit : 5,
table_col_limit : 5,
this controls the table styles NOTE THAT THE table_cell_limit and table_row_limit and table_col_limit can be edited to suit you.
theme_advanced_toolbar_location : "top", ============= this controls where the buttons are placed and the alignment of the buttons
theme_advanced_toolbar_align : "left",
plugin_insertdate_dateFormat : "%Y-%m-%d", ======== plugins which insert date and time
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
above is supported html elements
external_link_list_url : "example_data/example_link_list.js", =============== not yet 100% sure about this still trying to find out
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js"
**********************************************************************************************************************************************
NOW BY FOLLOWING THE INSTRUCTIONS ABOVE YOU WILL GET THE TINYMCE TO WORK ON YOUR SITE
HOWEVER
I AM HAVING A SMALL PROBLEM
MY SITE IS WORKING FINE WITH NO ERRORS BUT AFTER HAVING ADDED A PRODUCT USING THE EDITOR AND THEN VIEWING THE PRODUCT FROM THE CATALOG SIDE (FRONT END)
I SEE THAT I HAVE 2 STRAY "/> TAGS AT THE TOP LEFT OF MY PAGE ON THE PRODUCT THAT I HAVE ADDED AND AM VIEWING - NOW I AM STILL TRYING TO SORT THIS OUT.
SHOULD ANYONE FIND THE PROBLEM BEFORE I DO PLEASE BE SO KIND AND POST THE SOLUTION TO THIS IN THE FORUMS OR AT THE CONTRIBUTION SECTION.
*************************************************************************************************************************************************************
Best wishes
Rose
|
|
|
