How to Install FCKeditor in osCommerce
Learn how to install WYSIWYG editor FCKeditor in osCommerce to use for product descriptions.
FCKeditor is a web-based HTML text editor with similar functions as desktop applications like MS Word (see demo), making it useful for creating esthetically pleasing product descriptions in osCommerce.
FCKeditor is compatible with IE 5.5+, Firefox 1.5+, Safari 3.0+, Opera 9.50+, Chrome, Camino 1.0+, Apple, Linux and Windows.
Read Me
Before you begin work I recommend you backup your osCommerce database and that for any modifications you implement, instead of overwriting the original source code you should comment it out, this way you can revert changes in case you “FCKup” ha, ha, ha.
Pre-Installation
Download the latest version of FCKeditor for free.
Decompress the FCKeditor file to your catalog’s admin directory.
Create a directory in your catalog’s root directory titled “userfiles” and within this directory create four more sub-directories titled “file”, “image”, “flash” and “media”.
Using FileZilla or your favorite FTP client upload the directories you’ve created, catalog/admin/fckeditor/ and catalog/userfiles/ to your server.
Change read and write permissions to 777 for these directories:
catalog/userfiles/
catalog/userfiles/file
catalog/userfiles/media
catalog/userfiles/image
catalog/userfiles/flash
If you’re using FileZilla right click on each directory and select “File Attributes” (or “File Permissions” in some versions).
Install FCKeditor for Products Description
Open catalog/admin/categories.php
Find Around Line 541
1 2 3 4 | echo tep_draw_textarea_field('products_description[' .$languages[$i]['id'] .']', 'soft', '70', '15', (isset($products_description[$languages[$i]['id']]) ? stripslashes($products_description[$languages[$i]['id']]) : tep_get_products_description($pInfo->products_id, $languages[$i]['id']))); |
Replace With
1 2 3 4 5 6 | /***BOF FCKeditor v2.6.4***/ echo tep_draw_fckeditor('products_description[' .$languages[$i]['id'] .']', '600', '420', (isset($products_description[$languages[$i]['id']]) ? stripslashes($products_description[$languages[$i]['id']]) : tep_get_products_description($pInfo->products_id, $languages[$i]['id']))); /***EOF FCKeditor v2.6.4***/ |
The tep_draw_fckeditor() function returns an instance of FCKeditor to replace the native content editing textarea field created by the tep_draw_textarea_field() function. You can change the width and height values (’600′, ‘420′) to fit your workspace.
Open catalog/admin/includes/functions/html_ouput.php
Around Line 13
Insert the following include_once() just before this comment // The HTML href link wrapper function
1 2 3 | /***BOF FCKeditor v2.6.4***/ include_once("fckeditor/fckeditor.php"); /***EOF FCKeditor v2.6.4***/ |
Find Around Line 245
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function tep_draw_textarea_field($name, $wrap, $width, $height, $text = '', $parameters = '', $reinsert_value = true) { global $HTTP_GET_VARS, $HTTP_POST_VARS; $field = '<textarea name="' . tep_output_string($name) . '" wrap="' . tep_output_string($wrap) . '" cols="' . tep_output_string($width) . '" rows="' . tep_output_string($height) . '"'; if (tep_not_null($parameters)) $field .= ' ' . $parameters; $field .= '>'; if ( ($reinsert_value == true) && ( (isset($HTTP_GET_VARS[$name]) && is_string($HTTP_GET_VARS[$name])) || (isset($HTTP_POST_VARS[$name]) && is_string($HTTP_POST_VARS[$name])) ) ) { if (isset($HTTP_GET_VARS[$name]) && is_string($HTTP_GET_VARS[$name])) { $field .= tep_output_string_protected(stripslashes($HTTP_GET_VARS[$name])); } elseif (isset($HTTP_POST_VARS[$name]) && is_string($HTTP_POST_VARS[$name])) { $field .= tep_output_string_protected(stripslashes($HTTP_POST_VARS[$name])); } } elseif (tep_not_null($text)) { $field .= tep_output_string_protected($text); } $field .= '</textarea>'; return $field; } |
After the Function Above Add
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /***BOF FCKeditor v2.6.4***/ //// // Output a form textarea field using FCKeditor v2.6.4 function tep_draw_fckeditor($name, $width, $height, $text) { $oFCKeditor = new FCKeditor($name); $oFCKeditor->BasePath = "/admin/fckeditor/"; $oFCKeditor->Width = $width; $oFCKeditor->Height = $height; $oFCKeditor->Config["SkinPath"] = $oFCKeditor->BasePath ."editor/skins/silver/"; $oFCKeditor->Value = $text; $editor = $oFCKeditor->Create($name); return $editor; } /***EOF FCKeditor v2.6.4***/ |
The tep_draw_fckeditor() function returns an instance of FCKeditor using parameters $name, $width, $height and inserts $text into the editor’s body. The $oFCKeditor->BasePath variable is self-explanatory, it defines the directory path for FCKeditor relative to the html_output.php file. This object variable is then used to customize the configuration options for the editor to use a “Silver” skin & which you can change if you’d like.
Open catalog/admin/fckeditor/editor/filemanager/connectors/php/config.php and configure this file by specifying the following values.
Find at Line 27
1 2 3 4 | // SECURITY: You must explicitly enable this "connector". (Set it to "true"). // WARNING: don't just set "$Config['Enabled'] = true ;", you must be sure that only // authenticated users can access this file or use some kind of session checking. $Config['Enabled'] = true; |
Find at Line 36
1 2 3 4 5 | // Fill the following value it you prefer to specify the absolute path for the // user files directory. Useful if you are using a virtual directory, symbolic // link or alias. Examples: 'C:\\MySite\\userfiles\' or '/root/mysite/userfiles/'. // Attention: The above 'UserFilesPath' must point to the same directory. $Config['UserFilesAbsolutePath'] = '/YOUR/SERVERS/ABSOLUTE/PATH/TO/USERFILES/'; |
To specify the absolute directory path to “userfiles” go to osCommerce->Tools->Server Info, scroll down to “Environtment” and copy the “DOCUMENT_ROOT” variable value. Paste it for $Config['UserFilesAbsolutePath'] and append “/userfiles/” at the end of the absolute path. For example, if your website is hosted on a Linux environment your absolute path might look like “/home/content/user/public_html” and you will append “/userfiles/” after “public_html” to complete the full path.
Find at Line 127 & 128
1 2 | $Config['QuickUploadPath']['File'] = $Config['UserFilesPath'] ; $Config['QuickUploadAbsolutePath']['File'] = $Config['UserFilesAbsolutePath'] ; |
Replace With
1 2 | $Config['QuickUploadPath']['File'] = $Config['UserFilesPath'] .'file/'; $Config['QuickUploadAbsolutePath']['File'] = $Config['UserFilesAbsolutePath'] .'file/'; |
Find at Line 134 & 135
1 2 | $Config['QuickUploadPath']['Image'] = $Config['UserFilesPath'] ; $Config['QuickUploadAbsolutePath']['Image'] = $Config['UserFilesAbsolutePath'] ; |
Replace With
1 2 | $Config['QuickUploadPath']['Image'] = $Config['UserFilesPath'] .'image/'; $Config['QuickUploadAbsolutePath']['Image'] = $Config['UserFilesAbsolutePath'] .'image/'; |
Find at Line 141 & 142
1 2 | $Config['QuickUploadPath']['Flash'] = $Config['UserFilesPath'] ; $Config['QuickUploadAbsolutePath']['Flash']= $Config['UserFilesAbsolutePath'] ; |
Replace With
1 2 | $Config['QuickUploadPath']['Flash'] = $Config['UserFilesPath'] .'flash/'; $Config['QuickUploadAbsolutePath']['Flash'] = $Config['UserFilesAbsolutePath'] .'flash/'; |
Find at Line 148 & 149
1 2 | $Config['QuickUploadPath']['Media'] = $Config['UserFilesPath'] ; $Config['QuickUploadAbsolutePath']['Media'] = $Config['UserFilesAbsolutePath'] ; |
Replace With
1 2 | $Config['QuickUploadPath']['Media'] = $Config['UserFilesPath'] .'media/'; $Config['QuickUploadAbsolutePath']['Media'] = $Config['UserFilesAbsolutePath'] .'media/'; |
These fixes allow FCKeditor to upload files, images, flash and media to their directories in “userfiles” and allow the “browse server” button in the “Insert/Edit” window to list files previously uploaded.
FCKeditor Installation Complete
Test the installation by going to osCommerce->Catalog->Categories / Products, select a product and click “Edit” from the right column. You should see an instance of FCKeditor in place for the products description.
