Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Adding the FCKeditor HTML Editor

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 03-18-2007, 01:02 PM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 4,094
 

Default Adding the FCKeditor HTML Editor

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
__________________
xcartmods.co.uk
Reply With Quote

The following 7 users thank PhilJ for this useful post:
ADDISON (09-06-2012), benz (03-13-2010), chamberinternet (07-13-2009), chastie (03-25-2009), rayjohnson (05-02-2009), wendy.email (05-13-2010), Xel (03-19-2009)
  #2  
Old 03-19-2007, 06:37 AM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default Re: Adding the FCKeditor HTML Editor

Nicely done as always Phil
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #3  
Old 03-19-2007, 05:49 PM
 
icases icases is offline
 

Member
  
Join Date: Mar 2007
Posts: 14
 

Default Re: Adding the FCKeditor HTML Editor

Thanks for this post PhilJ. You helped me fix my FAQ manager.
__________________
Jeff S.
http://www.icases.net
X-Cart V4.1.6

A search engine that pays you! $.25/hour - click here
What is AGLOCO? click here
Reply With Quote
  #4  
Old 05-17-2007, 01:31 PM
 
parksmike parksmike is offline
 

Advanced Member
  
Join Date: Mar 2005
Posts: 77
 

Default Re: Adding the FCKeditor HTML Editor

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.
__________________
<><><><><><><><><><><><>
Mike Parks
X-Cart: 4.1.x
Captain Jack Communications
Reply With Quote
  #5  
Old 06-08-2007, 08:58 PM
  shopccp's Avatar 
shopccp shopccp is offline
 

Advanced Member
  
Join Date: Oct 2006
Posts: 35
 

Default Re: Adding the FCKeditor HTML Editor

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.
__________________
X-Cart Gold v4.4.4
Apache v2.2.20
PHP v5.3.8
MySQL v5.1.56-log
Linux kernel v2.6.18-238.19.1.el5xen
Reply With Quote
  #6  
Old 06-09-2007, 08:55 AM
  shopccp's Avatar 
shopccp shopccp is offline
 

Advanced Member
  
Join Date: Oct 2006
Posts: 35
 

Default Re: Adding the FCKeditor HTML Editor

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.
__________________
X-Cart Gold v4.4.4
Apache v2.2.20
PHP v5.3.8
MySQL v5.1.56-log
Linux kernel v2.6.18-238.19.1.el5xen
Reply With Quote
  #7  
Old 06-09-2007, 09:02 AM
  shopccp's Avatar 
shopccp shopccp is offline
 

Advanced Member
  
Join Date: Oct 2006
Posts: 35
 

Default Re: Adding the FCKeditor HTML Editor

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

The field is 'new_var_value'.

The fckeditor is now in languages.tpl
__________________
X-Cart Gold v4.4.4
Apache v2.2.20
PHP v5.3.8
MySQL v5.1.56-log
Linux kernel v2.6.18-238.19.1.el5xen
Reply With Quote
  #8  
Old 07-24-2007, 10:19 PM
  DataViking's Avatar 
DataViking DataViking is offline
 

eXpert
  
Join Date: Jan 2003
Location: Las Vegas, NV
Posts: 361
 

Default Re: Adding the FCKeditor HTML Editor

very nice mod
__________________
Web Design Web Design and Custom X-Cart Projects

http://www.dataviking.com

Mention the forums for discounts!
x-cart Version 4.1.8
Reply With Quote
  #9  
Old 07-25-2007, 06:04 AM
 
parksmike parksmike is offline
 

Advanced Member
  
Join Date: Mar 2005
Posts: 77
 

Default Re: Adding the FCKeditor HTML Editor

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";
__________________
<><><><><><><><><><><><>
Mike Parks
X-Cart: 4.1.x
Captain Jack Communications
Reply With Quote
  #10  
Old 09-22-2007, 01:46 PM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 4,094
 

Default Re: Adding the FCKeditor HTML Editor

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
__________________
xcartmods.co.uk
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 06:33 PM.

   

 
X-Cart forums © 2001-2020