CKEditor with image upload please?

dmpinder · #1 04-30-2010, 03:37 AM

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

inteliboy1 · #2 06-16-2010, 10:23 PM

I second this.

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

PhilJ · #3 06-17-2010, 05:04 AM

It's called CKFinder

PhilJ · #4 06-30-2010, 04:47 AM

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

dmpinder · #5 06-30-2010, 12:19 PM

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

spacerace · #6 07-08-2010, 01:14 AM

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

dmpinder · #7 07-12-2010, 09:39 AM

Hi Rob,

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

Darren

ARW VISIONS · #8 07-12-2010, 11:36 AM

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

Ash

dmpinder · #9 07-28-2010, 07:09 AM

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

larenespitler · #10 08-05-2010, 08:26 AM

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