Adding the FCKeditor HTML Editor

PhilJ · #1 03-18-2007, 01:02 PM

I'm not that keen on the HTML editor module in v4.1.x...

FCKEditor is far better, it generates decent HTML and has a very useful image uploader.

Here's how to add it...

1) Disable the existing HTML editor in modules.

2) Download FCKeditor here - http://www.fckeditor.net/download

Or, click here for direct download to files, which includes CKFinder (license required).

3) Upload the 'fckeditor' directory to your root directory.

4) Apply this SQL patch...

Code:

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

^ This will create a new FCKEditor entry in 'modules'.

5) In skin1/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).

If the FCKEditor doesn't load, try manually adding the full path instead, eg.

Code:

{if $active_modules.FCKEditor ne ""}
<script type="text/javascript" src="http://www.mystore.com/fckeditor/fckeditor.js"></script>
{/if}

6) PRODUCT DESCRIPTIONS

In skin1/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}

7) STATIC PAGES

In skin1/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}

Also, change...

Code:

<table cellpadding="3" cellspacing="1">

to...

Code:

<table cellpadding="3" cellspacing="1" width="100%">

8 ) CATEGORIES

In skin1/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}

9 ) MANUFACTURERS

In skin1/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}

10) NEWS POSTINGS

In skin1/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}

Done.

a) To use just the basic ToolbarSet, in each case change...

Code:

oFCKeditor.ToolbarSet="Default";

to...

Code:

oFCKeditor.ToolbarSet="Basic";

b) You can customise your chosen ToolbarSet, or make your own in fckeditor/fckconfig.js

c) To change the heights of the editors, in each case change...

Code:

oFCKeditor.Height="200";

d) To enable the image upload system...

i) In /fckeditor/editor/filemanager/connectors/php/config.php

Change...

Code:

$Config['Enabled'] = false ;

To...

Code:

$Config['Enabled'] = true ;

ii) Create a new folder in your store root directory call 'userfiles'. Then make it writable, or CHMOD it to 777.

UPDATE: Sept 2009 - FCKEditor has now become CKEditor

balinor · #2 03-19-2007, 06:37 AM

Nicely done as always Phil

icases · #3 03-19-2007, 05:49 PM

Thanks for this post PhilJ. You helped me fix my FAQ manager.

parksmike · #4 05-17-2007, 01:31 PM

Strange one? I am using it on the static pages. It works on new entries. But does not appear when editing existing pages? It goes back to the default textarea. But I see the fck javascript to initiate it in the source code when I do a view source?

Any guess?

Ok, its a little farther left of center. On some entries the editor does appear. Entries that are only a few lines. But most of these pages have "P" tags, tables, links, images, etc. If you edit these you get the default text area

The cart is 4.1.7
the fckeditor is 2.4.2

I fixed it...

I added
oFCKeditor.Value = "{$page_content}";
This was the mistake. I took it out and now it works perfectly.

shopccp · #5 06-08-2007, 08:58 PM

Very nice upgrade.
Though, I wish the install put a seperate module inside the module section. Also, I wish the input boxes were a little larger.

shopccp · #6 06-09-2007, 08:55 AM

How do you add the fckeditor for the language variables? I found the field for value text box. I inserted the above fckeditor code in languages.tpl. It doesn't work. It says it can't find value.

I don't get it. It should have found it.

Any help would be great.

shopccp · #7 06-09-2007, 09:02 AM

I found the field to insert the fckeditor in languages.tpl.

The field is 'new_var_value'.

The fckeditor is now in languages.tpl

DataViking · #8 07-24-2007, 10:19 PM

very nice mod

parksmike · #9 07-25-2007, 06:04 AM

Quote:

Originally Posted by shopccp

Very nice upgrade.
Though, I wish the install put a seperate module inside the module section. Also, I wish the input boxes were a little larger.

Add these 2 lines and set the size that you want

Code:

oFCKeditor.Height="700";
oFCKeditor.Width="550";

PhilJ · #10 09-22-2007, 01:46 PM

UPDATE, here's an editor that is more lightweight than FCKeditor and is XHTML friendly (W3C compliant)

Try it here - http://demo.wymeditor.org

Grab it here - http://www.xcartmods.co.uk/count/click.php?id=25