[Contribution] CKEditor [wyswyg]

www.in.no · January 29, 2010

Support tread for CKEditor [wyswyg]

Contribution can be found here.

Thanks goes to escri2 for adding this contribution and make it working in other contribution.

I create this forum tread where we can discuse and helteach other to integrate this editor into more contribution. I am not a coding guru, but together we may be able to get this cotribution to work with the major contribs where a wyswyg editor is needed.

Today it is used in theese contribution / functions.

Information Pages Unlimited v2.07 -> Link

Products descriptions. (instructions in CKEditor contribution.)

It is a greate editor buildt on and replaceing the old FCKEditor.

There is still some functions that can be improved / added.

-File / image uplade function.

-Image browsing.

-Needed code change to other contribution.

-Function to not load javascript if not needed. (same function as for tinyMCE)

- Adjust ckeditor pack fore OSC. Remove unneeded files in pack.

- Configuration changes to better work in OSC

-??

If you have this contribution installed and/or got it working with other contribution and want to help. Please post the code changes here or make a uplod to the contribution page with instruction.

www.in.no · January 29, 2010

Have added package to only load javascript when needed.

Only need to replace the javascript line for ckeditor.

Easy to modify.

www.in.no · January 29, 2010

Have added the option to turn ckeditor on or of from admin.

azer · February 2, 2010

can someone please make an installation manual to know the modification to make to the ckeditor taken from their website

i managed to instal all FCKeditor version but CK editor i really different

designbysue · February 3, 2010

I am trying to add the code to turn the editor on and off in admin per the contribution page which states:

Run this query in phpmyadmin. You can modyfy where you want this option listed. The groupe_id is for the configuration groupe in admin - configuration. No 1 is "My Store". The "sort order" is where in the list this will be added. For me no. 22 was the next availeble sort order under group_id = 1.

Changes to fit your store.

INSERT INTO `configuration` ( `configuration_id` , `configuration_title` , `configuration_key` , `configuration_value` , `configuration_description` , `configuration_group_id` , `sort_order` , `last_modified` , `date_added` , `use_function` , `set_function` )

VALUES (

'', 'Use CKEditor', 'CKEditor_use', 'false', 'Select if you want to use CKEditor or not', 1, , '', '', NULL , 'tep_cfg_select_option(array(''true'', ''false''),'

)

when I run this SQL I get the folowing statement from phpmyadmin:

#1064 - You have an error in your SQL syntax. Check the manual that corresponds to your MySQL server version for the right syntax to use near ' '', '', NULL , 'tep_cfg_select_option(array(''true'', ''false'

help please

Sue

Edited February 3, 2010 by designbysue

designbysue · February 3, 2010

The editor is showing up in the Categories/Product area but the area is only about a inch and a half wide.

Screen shot here

How does one widen this to a usable condition?

Sue

designbysue · February 3, 2010

Sorry - one more thing - the editor is showing up as stated but the original oscommerce product description area is still below the editor area. I would like the editor to replace the original oscommerce input area.

Also - I see the editor window can be sized, but I would rather it open in a larger state rather than have tod the extra mouse movements every time editing is needed.

Sue

Edited February 3, 2010 by designbysue

www.in.no · February 3, 2010

I think this may because of a missing ; at the end.

try this

INSERT INTO `configuration` ( `configuration_id` , `configuration_title` , `configuration_key` , `configuration_value` , `configuration_description` , `configuration_group_id` , `sort_order` , `last_modified` , `date_added` , `use_function` , `set_function` ) 
VALUES (
'', 'Use CKEditor', 'CKEditor_use', 'false', 'Select if you want to use CKEditor or not', 1, , '', '', NULL , 'tep_cfg_select_option(array(''true'', ''false''),'
);

The with of the editor windows i have not figured out yet as it has not been that annoying yet..

To remove the extra old textarea window, you must remove some duplicate code in the categories.php file.

Here i have commented out the old code. Remove it or comment out.

         <tr>
           <td class="main" valign="top"><?php if ($i == 0) echo TEXT_PRODUCTS_DESCRIPTION; ?></td>
           <td><table border="0" cellspacing="0" cellpadding="0">
             <tr>
               <td class="main" valign="top"><?php echo tep_image(DIR_WS_CATALOG_LANGUAGES . $languages[$i]['directory'] . '/images/' . $languages[$i]['image'], $languages[$i]['name']); ?> </td>
               <td class="main">
<?php echo tep_draw_textarea_field('products_description[' . $languages[$i]['id'] . ']', 'soft', '70', '10',
(isset($products_description[$languages[$i]['id']]) ? stripslashes($products_description[$languages[$i]['id']]) :
tep_get_products_description($pInfo->products_id, $languages[$i]['id'])),'id = products_description[' .
$languages[$i]['id'] . '] class="ckeditor"'); ?>
<!-- /*** old code  <?php 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']))); ?>
***/ //-->
</td>
             </tr>

Edited February 3, 2010 by www.in.no

www.in.no · February 3, 2010

To set the with of the window add this in tge config.js file in the ckeditor folder.

config.width = 850;
or
config.width = '75%';

Change to the value you want.

designbysue · February 3, 2010

The config.width worked great.

Here is the code I have - what am I to comment out (can't find exactly what you posted)

<tr>

</tr>

<tr>

<td class="main"><?php echo tep_draw_separator('pixel_trans.gif', '24', '15') . ' ' . tep_draw_pull_down_menu('manufacturers_id', $manufacturers_array, $pInfo->manufacturers_id); ?></td>

</tr>

<tr>

</tr>

<?php

for ($i=0, $n=sizeof($languages); $i<$n; $i++) {

?>

</tr>

<tr>

<tr>

<?php echo tep_draw_textarea_field('products_description[' . $languages[$i]['id'] . ']', 'soft', '70', '10', (isset($products_description[$languages[$i]['id']]) ? stripslashes($products_description[$languages[$i]['id']]) : tep_get_products_description($pInfo->products_id, $languages[$i]['id'])),'id = products_description[' . $languages[$i]['id'] . '] class="ckeditor"'); ?>

</td>

</tr>

</table></td>

</tr>

<?php

}

?>

<tr>

</tr>

<td class="main"><?php echo tep_draw_separator('pixel_trans.gif', '24', '15') . ' ' . tep_draw_pull_down_menu('products_tax_class_id', $tax_class_array, $pInfo->products_tax_class_id, 'onchange="updateGross()"'); ?></td>

</tr>

<td class="main"><?php echo tep_draw_separator('pixel_trans.gif', '24', '15') . ' ' . tep_draw_input_field('products_price', $pInfo->products_price, 'onKeyUp="updateGross()"'); ?></td>

</tr>

<td class="main"><?php echo tep_draw_separator('pixel_trans.gif', '24', '15') . ' ' . tep_draw_input_field('products_price_gross', $pInfo->products_price, 'OnKeyUp="updateNet()"'); ?></td>

</tr>

<tr>

</tr>

updateGross();

//--></script>

<?php

for ($i=0, $n=sizeof($languages); $i<$n; $i++) {

?>

<tr>

<tr>

<td class="main"><?php 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']))); ?></td>

</tr>

</table></td>

</tr>

<?php

}

?>

<tr>

Sue

Edited February 3, 2010 by designbysue

www.in.no · February 3, 2010

Check the last bit of code, you will find the duplicate code there. It looks like it is edited with some other contribution.

You will have to edit out and merge it to one instanse.

<script language="javascript"><!--
updateGross();
//--></script>
<?php
for ($i=0, $n=sizeof($languages); $i<$n; $i++) {
?>
<tr>
<td class="main" valign="top"><?php if ($i == 0) echo TEXT_PRODUCTS_DESCRIPTION; ?></td>
<td><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="main" valign="top"><?php echo tep_image(DIR_WS_CATALOG_LANGUAGES . $languages[$i]['directory'] . '/images/' . $languages[$i]['image'], $languages[$i]['name']); ?> </td>
<td class="main"><?php 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']))); ?></td>
</tr>
</table></td>
</tr>
<?php
}
?>
<tr>

designbysue · February 3, 2010

I copied this code from the contribution (admin>categories.php

</tr>

<tr>

<tr>

<?php echo tep_draw_textarea_field('products_description[' . $languages[$i]['id'] . ']', 'soft', '70', '10', (isset($products_description[$languages[$i]['id']]) ? stripslashes($products_description[$languages[$i]['id']]) : tep_get_products_description($pInfo->products_id, $languages[$i]['id'])),'id = products_description[' . $languages[$i]['id'] . '] class="ckeditor"'); ?>

</td>

</tr>

</table></td>

is the error in here? If so - how can I correct it. I have used Beyond Compare and I don't see where any other contribution clashes with this.

Sue

designbysue · February 3, 2010

Actually there is a larger problem - the window has replaced the product name instead of the description!!!

I have to remove this at this point because client is coming tomorrow see the back end of the cart. But if anyone can tell me how to make this work it would be appreciated!!!

Sue

designbysue · February 3, 2010

OK - I found the problem - the categories.php in the installation is not correct!!!! - I appreciate your posting the code here so I could cut and paste. The directions for this install are a pdf which doesn't allow for copying, searching and pasting. I suggest the creators of this contribution make the instructions as a text file to make the upgrade much easier and also that they look at the included file of categories.php because I followed it through Beyond Compare and it replaced my products name!!1

Thanks for your help

Sue

www.in.no · February 3, 2010

The instructions are not that complicated so i will se if i can copy it out and post it as a text file in the contrib page. You can cut and past from the pdf with the right software.

sunrise99 · February 6, 2010

The instructions are not that complicated so i will se if i can copy it out and post it as a text file in the contrib page. You can cut and past from the pdf with the right software.

Hi,

Now default CKEditor don't support image upload, need CKEfinder install, would you please help to how to make CKEditor can work with CKEfinder together?

Best Regards,

Sunrise99

www.in.no · February 6, 2010

CKfinder is a comercial product and i am not sure if we can include it in oscommerce.

But it is availeble to install in demo mode, and i can outline the steps to get it working.

1. Upload ckfinder to the admin folder.

2. Add this line to ckeditor/config.js

CKFinder.SetupCKEditor( null, '../admin/ckfinder/' );

3. Add the path to the 2 variables (baseUrl and baseDir) in config.php in ckfinder directory.

$config['LicenseName'] = '';
$config['LicenseKey'] = '';
$baseUrl = 'http://xxx.yy.no/';
$baseDir = '/home/xxxx/public_html/';

Then the upload path will be to the images folder in your catalog directory.

The images folder name is set some other place in the file, but no need to change.

4. You may also add the _thumbs directory within the images folder.

This is for images only, for uploading flash files a seperate config has to be set. I havent looked into that yet as i am not using flash at my site.

I had some folder problems when testing, so you may need to read your server log to se that the path and folders are correct.

blr044 · February 8, 2010

I have uploaded ones of Nic's template ver Rc2a and he has added the FCK WYSIWYG contribution. I can edit pages but am having problems when I want to add images. At admin, it states it is ver 2.6. Whenever I tick insert image, the popup opens but with an error. The error is telling me the path is incorrect. /home/user/html_public/catalog/admin/.../.....

I do not see the the mod in list of contributions so as that I may be able to read any docs. Because I know it must be a config file, but no such file in directory. When I open in contribution FCK WYSIWYG it points CKEditor.

See an earlier post where a member stated he wanted FCK but got CKEditor instead. Would that be depending on the ver downloaded?

Any comments or suggestions on this is appreciated.

Bennett

www.in.no · February 9, 2010

FCKeditor is the old version and is still in use with oscommerce and have it's own supporttred. CKEditor is a new name for the old FCKeditor.

This support tread is for CKEditor and what you will choose to use is up to you. CKEditor is easy to use and install, but still not having the code for using with all addons as you more likly will find for FCKeditor or tinyMCE.

designbysue · February 9, 2010

I think this may because of a missing ; at the end.

try this

INSERT INTO `configuration` ( `configuration_id` , `configuration_title` , `configuration_key` , `configuration_value` , `configuration_description` , `configuration_group_id` , `sort_order` , `last_modified` , `date_added` , `use_function` , `set_function` ) 
VALUES (
'', 'Use CKEditor', 'CKEditor_use', 'false', 'Select if you want to use CKEditor or not', 1, , '', '', NULL , 'tep_cfg_select_option(array(''true'', ''false''),'
);

This code still does not run - I get the following error message"

#1064 - You have an error in your SQL syntax. Check the manual that corresponds to your MySQL server version for the right syntax to use near ' '', '', NULL , 'tep_cfg_select_option(array(''true'', ''false'

Sue

www.in.no · February 9, 2010

Here is the export result from querying that post on my server.

You may change the configuration_id (1194) to blank as this should be set automatic.

Sort order should also be uniq for result in configuration_group_id, 22 is the next availeble number for me, but may not be for you.


INSERT INTO `configuration` (`configuration_id`, `configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) VALUES
(1194, 'Use CKEditor', 'CKEditor_use', 'true', 'Select if you want to use CKEditor or not', 1, 22, '2010-01-29 18:54:56', '0000-00-00 00:00:00', NULL, 'tep_cfg_select_option(array(''true'', ''false''),');

What mysql version are you using. This is from 4.1.22

designbysue · February 9, 2010

This code still does not run - I get the following error message"

#1064 - You have an error in your SQL syntax. Check the manual that corresponds to your MySQL server version for the right syntax to use near ' '', '', NULL , 'tep_cfg_select_option(array(''true'', ''false'

Sue

DUH - I get it now, I needed to enter a sort order (though I would rather this show up in another area of the menu)so I got the link to appear. BUT I can't get this to work. True or False ...the editor is always showing. (and yes I did put the rest of the script in the categories.php head) Does anyone have the answer to make this work? - this is the extra part of the contribution to allow it to be turned off and on in the admin pasted by www.in.no. (correct link to contribution is http://addons.oscommerce.com/info/7112 - link in first post here is not correct)

Here is the entire text file I am working with:

Run this query in phpmyadmin. You can modyfy where you want this option listed. The groupe_id is for the configuration groupe in admin - configuration. No 1 is "My Store". The "sort order" is where in the list this will be added. For me no. 22 was the next availeble sort order under group_id = 1.

Changes to fit your store.

INSERT INTO `configuration` ( `configuration_id` , `configuration_title` , `configuration_key` , `configuration_value` , `configuration_description` , `configuration_group_id` , `sort_order` , `last_modified` , `date_added` , `use_function` , `set_function` )

VALUES (

'', 'Use CKEditor', 'CKEditor_use', 'false', 'Select if you want to use CKEditor or not', 17,1, '', '', NULL , 'tep_cfg_select_option(array(''true'', ''false''),'

);

In the file you have to add this in the HEAD section to be able to load ckeditor javascript when needed. Currently categories.php and information_manager.php.

As always all help greatly appreciated!

Sue

<?php

if (CKEditor_use == 'true') {

if ($action == 'new_product' || $information_action == 'Added' || $information_action == 'Edit' ) {

// No need to put JS on all pages. If need more action to the string above.

echo '<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>';

}

?>

blr044 · February 9, 2010

There was an update for this contribution on Jan 29, 2010 regarding changes to turn ckeditor on/off in admin. In the instructions:

In the file you have to add this in the HEAD section to be able to load ckeditor javascript when needed. Currently categories.php and information_manager.php .

I do not have such a file in sdmin or includes. So does one need this file to make this change?

Thanks.

Bennett

Note: I did remove the the FCKEditor and installed the new ver.

blr044 · February 9, 2010

I was going to edit my above post, but it tells me i do not have permission to do it.

So I need to add something to above post. After removing FCKeditor and installing CKEditor I get an error when I try to open page to edit. Regardless which I try, i get this error message:

Fatal error: Call to undefined function tep_draw_fckeditor() in /home/xxxxxx/public_html/cxxxxxxxxx/xxxxxx/shipping_html.php on line 103

This what is on line 103 of the editable files:

<td class="main"><?php echo tep_draw_fckeditor('file_contents', '700', '600', $file_contents, (($file_writeable) ? '' : 'readonly')); ?></td>

So it is referring to fckeditor instead of ckeditor. Didnot see any instructions regarding these html files under the admin directory.

sunrise99 · February 10, 2010

CKfinder is a comercial product and i am not sure if we can include it in oscommerce.

But it is availeble to install in demo mode, and i can outline the steps to get it working.

1. Upload ckfinder to the admin folder.

2. Add this line to ckeditor/config.js
CKFinder.SetupCKEditor( null, '../admin/ckfinder/' );
3. Add the path to the 2 variables (baseUrl and baseDir) in config.php in ckfinder directory.
$config['LicenseName'] = '';
$config['LicenseKey'] = '';
$baseUrl = 'http://xxx.yy.no/';
$baseDir = '/home/xxxx/public_html/';
Then the upload path will be to the images folder in your catalog directory.

The images folder name is set some other place in the file, but no need to change.

4. You may also add the _thumbs directory within the images folder.

This is for images only, for uploading flash files a seperate config has to be set. I havent looked into that yet as i am not using flash at my site.

I had some folder problems when testing, so you may need to read your server log to se that the path and folders are correct.

Hi,

Thanks for your reply.

I do it according to your guide, but image upload still can't work.

Best Regards,

Sunrise99

[Contribution] CKEditor [wyswyg]

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation