X-Cart forums - 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