X-Cart forums - CKEditor with image upload please?

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - CKEditor with image upload please? (https://forum.x-cart.com/showthread.php?t=53524)

CKEditor with image upload please?

Hey everyone,

I remember reading somewhere on this forum that CKEditor was a great new choice for HTML editor because it allowed image uploads. I was excited by this because my clients are not tech-savvy, so this was an ideal way for them to add images to static pages.

I've installed X-Cart Gold 4.3.1 but to my dismay the CKEditor doesn't have the image upload function. I know that it SHOULD - on CKEditor's own website it is advertised - but it seems to be disabled in X-Cart.

I would hugely appreciate anyone who can show me how to activate it!

Many thanks,

Darren :-)

Re: CKEditor with image upload please?

I second this.

Exactly how do your clients manage your static pages without this option?? Perhaps is there an additional image upload mod?

Re: CKEditor with image upload please?

It's called CKFinder

Re: CKEditor with image upload please?

Here's an easier alternative to CKFinder - http://kcfinder.sunhater.com

Re: CKEditor with image upload please?

Hey,

Sorry I didn't update this thread. I spoke to X-Cart Support who wanted to charge me a few hundred to install the full FCK Editor (with Image upload), so I decided for that price to try myself first. I installed the editor from scratch and now I have it working with Image Upload facility. If anyone is interested in replicating this then I could PM you the instructions I wrote down as I was doing it, hopefully you can do it too.

I would recommend you look into proper solutions before doing this custom add-on, I haven't tested all possibilities to make sure it works fully, I just got it working and left it alone.

Darren

Re: CKEditor with image upload please?

Hi Darren

Going to give this a try as well, would really appreciate details of the steps you took as it will be a good guide!

Rob

Re: CKEditor with image upload please?

Hi Rob,

I sent you a PM, I need your email address to send you the files / guide.

Darren

Re: CKEditor with image upload please?

what good is a WYSIWYG editor that doesn't upload images? Why would x-cart even have this. Should be stock I think.

Ash

Re: CKEditor with image upload please?

Hey everyone,

Here is the solution to uploading FCKEditor to your X-Cart WITH the ability to upload images, files, etc.

You first need to download the files required, which are here: www.darrenpinder.co.uk/fckeditor.rar

1. Copy the /fckeditor/ folder into the root directory of the site and upload to server

2. Disable the existing HTML Editor module

3. Apply this SQL patch:

Code:

INSERT INTO xcart_modules VALUES (100,'FCKEditor','This module allows you to edit text in WYSIWYG mode.','Y');

4. In {$SkinDir}/single/home.tpl:

Before:

Code:

</head>

Insert:

Code:

{if $active_modules.FCKEditor ne ""}

        <script type="text/javascript" src="{$http_location}/fckeditor/fckeditor.js"></script>

        {/if}

((Change to {https_location} if your admin uses SSL).)

5. In {$SkinDir}/main/product_details.tpl:

Before:

Code:

</form>

Insert:

Code:

{if $active_modules.FCKEditor ne ""}

        <script type="text/javascript">

        var oFCKeditor = new FCKeditor('descr');

        oFCKeditor.BasePath = "../fckeditor/";

        oFCKeditor.Height="200";

        oFCKeditor.ToolbarSet="Default";

        oFCKeditor.ReplaceTextarea() ;

        </script>

        <script type="text/javascript">

        var oFCKeditor = new FCKeditor('fulldescr');

        oFCKeditor.BasePath = "../fckeditor/";

        oFCKeditor.Height="400";

        oFCKeditor.ToolbarSet="Default";

        oFCKeditor.ReplaceTextarea() ;

        </script>

        {/if}

6. In {$SkinDir}/admin/main/page_edit.tpl:

Before:

Code:

</form>

Insert:

Code:

{if $active_modules.FCKEditor ne ""}

        <script type="text/javascript">

        var oFCKeditor = new FCKeditor('pagecontent');

        oFCKeditor.BasePath = "../fckeditor/";

        oFCKeditor.Height="400";

        oFCKeditor.ToolbarSet="Default";

        oFCKeditor.ReplaceTextarea() ;

        </script>

        {/if}

7. In {$SkinDir}/admin/main/category_modify.tpl:

Before:

Code:

</form>

Insert:

Code:

{if $active_modules.FCKEditor ne ""}

        <script type="text/javascript">

        var oFCKeditor = new FCKeditor('description');

        oFCKeditor.BasePath = "../fckeditor/";

        oFCKeditor.Height="400";

        oFCKeditor.ToolbarSet="Default";

        oFCKeditor.ReplaceTextarea() ;

        </script>

        {/if}

8. In {$SkinDir}/modules/Manufacturers/manufacturers.tpl

Before:

Code:

</form>

Insert:

Code:

{if $active_modules.FCKEditor ne ""}

        <script type="text/javascript">

        var oFCKeditor = new FCKeditor('descr');

        oFCKeditor.BasePath = "../fckeditor/";

        oFCKeditor.Height="200";

        oFCKeditor.ToolbarSet="Default";

        oFCKeditor.ReplaceTextarea() ;

        </script>

        {/if}

9. In {$SkinDir}/modules/News_Management/news_messages_modify.tpl:

Before:

Code:

</form>

Insert:

Code:

{if $active_modules.FCKEditor ne ""}

        <script type="text/javascript">

        var oFCKeditor = new FCKeditor('message[body]');

        oFCKeditor.BasePath = "../fckeditor/";

        oFCKeditor.Height="200";

        oFCKeditor.ToolbarSet="Default";

        oFCKeditor.ReplaceTextarea() ;

        </script>

        {/if}

10. To enable the image upload system, in /fckeditor/editor/filemanager/connectors/php/config.php:

Change:

Code:

$Config['Enabled'] = false ;

To: (This step already done by default)

Code:

$Config['Enabled'] = true ;

Create a new folder in the root directory called /userfiles/ and CHMOD it to 777.

If you are using the FCKEditor to upload images and you are developing on an IP address instead of a fully-resolved domain name, then you need to edit the file /fckeditor/editor/filemanager/connectors/php/config.php (line 39):

Change:

Code:

$Config['UserFilesAbsolutePath'] = '' ;

To:

Code:

$Config['UserFilesAbsolutePath'] = '/home/sites/domain.co.uk/public_html/userfiles/' ;

(Or whichever absolute URL is required for your server configuration)

You also need to change each of the $Config['QuickUploadAbsolutePath'] paths in the same file to include file-type-specific folder extensions at the end of the string:

Change:

Code:

$Config['QuickUploadAbsolutePath']['Image']= $Config['UserFilesAbsolutePath'] ;

To:

Code:

$Config['QuickUploadAbsolutePath']['Image']= $Config['UserFilesAbsolutePath'] . 'images/' ;

So in the example above I used the directory images/ for images, and I've also used file/ for PDFs, flash/ for swf, etc. These are already in the file, so you can leave these if you are happy with the folders.

That's it, you're done! :)

If you have any problems then let me know, I'll try to help if I can. I'm not an expert on this, so I might not have the answers, but I'll try :)

Good luck,

Darren

Re: CKEditor with image upload please?

2. Disable the existing HTML Editor module

How do you do this? I went to the X-cart admin area and looked at General Settings and HTML Editor, but it doesn't let me just turn it off.

Larene

Re: CKEditor with image upload please?

Hi Larene,

You disable the HTML Editor module itself not by going into the General Settings page, but by instead going to the Modules page (modules.php). You will see an entry for the HTML Editor, just uncheck the box and save that page.

Darren

Re: CKEditor with image upload please?

[quote=larenespitler]2. Disable the existing HTML Editor module

How do you do this? I went to the X-cart admin area and looked at General Settings and HTML Editor, but it doesn't let me just turn it off.

I figured it out, dah.... go to Modules and turn it off.

Larene

Re: CKEditor with image upload please?

It is still not working. I have made every change you suggested. I put the folder /fckeditor in the root directory, (Apache document root folder), then I also tried copying it into the xcart folder, (root)/xcart.

When I turn off HTML Editor in the Modules section, and I try to edit categories, I do not see the WYSIWYG link.

Any ideas?

Re: CKEditor with image upload please?

Thank you SOOOO much Darrin! You are the best! This is awesome!

My problem was I changed /skin1/home.tpl instead of /skin1/single/home.tpl.

I didn't know if the program created the directories within /userfiles/ like /userfiles/images, etc, so I created them.

(root)/userfiles/images
(root)/userfiles/file
(root)/userfiles/media
(root)/userfiles/flash

I also made them writeable.
chmod 777 (root)/userfiles/images
chmod 777 (root)/userfiles/media
chmod 777 (root)/userfiles/flash
chmod 777 (root)/userfiles/file

Re: CKEditor with image upload please?

One more question, do we need to be concerned about the security issue mentioned in:

http://www.arscommunity.com/wiki/articles/x-cart-ckfinder

Have you seen this?

Larene

Re: CKEditor with image upload please?

I found another file that should be changed. {skin}/admin/main/languages.tpl

Before the code {/foreach} on line 231, insert:

Code:

 

{if $active_modules.FCKEditor ne ""}

        <script type="text/javascript">

        var oFCKeditor = new FCKeditor('var_value[{$lbl.name}]');

        oFCKeditor.BasePath = "../fckeditor/";

        oFCKeditor.Height="400";

        oFCKeditor.ToolbarSet="Default";

        oFCKeditor.ReplaceTextarea();

        </script>

        {/if}

This will add WYSIWYG to the edit languages module. This is needed if you want to edit the X-cart home page.

Larene

Re: CKEditor with image upload please?

Hi Larene,

I've replied to your email directly.

For anyone else reading and wondering about the security issue, what I told Larene is that I don't fully understand the vulnerability myself but I'd recommend you go ahead and patch the file just in case there is a potential problem.

I haven't included the security fix in my file download, so please do this yourself.

Darren

Re: CKEditor with image upload please?

Hi Darren,

I have completed these steps but keep getting the following error,

"Error creating folder http://xxx.xxx.xxx.xxx/public_html/userfiles/images/" (Can;t create http:/directory

I assume this is a permission error but I have set the file to 777 as per your instructions.

your assistance is appreciated.

Re: CKEditor with image upload please?

Hi BBM,

Are you sure your file path should include public_html? That's only really used for the server-side or FTP client, it shouldn't appear in a file path used on the site. Try removing it from the path and see if that works.

Darren

Re: CKEditor with image upload please?

Hi Darren,

Many thanks for the response. I have removed the public_html and still have the error that I can not create xxx.xxx.xxx.xxx directory?

If you have any suggestions it would be appreciated.

EDIT: what's weird is I can browse to the folder.

Re: CKEditor with image upload please?

Can you ensure you've set both the directory userfiles and userfiles/images to 777?

If that doesn't work, can you copy in the error message exactly as you see it? Is it Can;t create http:/directory ?

Re: CKEditor with image upload please?

Hi Darren,

Here is the info as requested.

/userfiles is set to 0777
/userfiles/images is set to 0777

The exact error message is,

Error creating folder "xxx.xxx.xxx.xxx/userfiles/images/" (can't create xxx.xxx.xxx.xxx directory)

with xxx being the ip address of the server.

EDIT: to clarify the public_html directory is set to 0750

I hope this helps.

Re: CKEditor with image upload please?

hmm OK it could be that your server doesn't store the web files in the same directory as mine.

I'm assuming you're trying to edit the line like this:
$Config['UserFilesAbsolutePath'] = '/home/sites/domain.co.uk/public_html/userfiles/' ; in the file fckeditor/editor/filemanager/connectors/php/config.php. That is probably where you're having an issue.

I think the solution might be this:

1. Create a new file on the root of your site called info.php
2. The contents of this file should be just:
<?php phpinfo(); ?>
3. Upload this file and view it in your browser. There will be a ton of info about your server.
4. Do a search on this page for the value for DOCUMENT_ROOT, it should be held within the Environment area. Find the value of this, it will be what you need to paste in as part of the file path. In mine, the value is /home/sites/domain.co.uk/public_html and then I add the userfiles/images. I suspect your DOCUMENT_ROOT is different in structure than mine (different server configuration), so that's your best bet.

Let me know how you get on.

Re: CKEditor with image upload please?

Wow Darren,

A huge thank you to you! Your steps outlined above have solved my problem and now the images are loading correctly.

You certainly know your server stuff.

Once again many kind thanks. Also thanks for teaching me something new :)

Re: CKEditor with image upload please?

Your welcome, I'm glad it worked!

Re: CKEditor with image upload please?

Quote:

Originally Posted by PhilJ

Here's an easier alternative to CKFinder - http://kcfinder.sunhater.com

Hey all,

I've tried adding KCFinder to CKFinder and it works great outside of one issue - by default ANYONE can access the resource browser via the right URL. In order to restrict it to only admins, you have to due some SESSION work ala this page:

http://kcfinder.sunhater.com/docs/integrate#session

I have no clue where to add the proper session info to restrict the browser to logged in admins.

Anyone have any ideas on this? I'm desperate :(

Re: CKEditor with image upload please?

Do you anticipate any problems if I download the latest FCK Editor to my xcart website?

I was thinking I could just download it and install it in the folder /xcart/fckeditor.

What do you think.
Larene

Re: CKEditor with image upload please?

Hi Larene,

I don't see a problem with trying that. Just download the files from their website and use those files instead.

You'll have to follow my instructions very closely, and be aware some of the line numbers I quote may have changed, so you may need to search for the relevant code instead.

Good luck,

Darren

Re: CKEditor with image upload please?

Hello All,

Does anyone know if "FCKEditor" could be used for uploading Partner's Profile Image on the Registration Page?

Looking for your response.