X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing and adding new features (https://forum.x-cart.com/forumdisplay.php?f=20)
-   -   Adding the FCKeditor HTML Editor (https://forum.x-cart.com/showthread.php?t=29771)

PhilJ 03-18-2007 01:02 PM

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 :)

balinor 03-19-2007 06:37 AM

Re: Adding the FCKeditor HTML Editor
 
Nicely done as always Phil :)

icases 03-19-2007 05:49 PM

Re: Adding the FCKeditor HTML Editor
 
Thanks for this post PhilJ. You helped me fix my FAQ manager.

parksmike 05-17-2007 01:31 PM

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.

shopccp 06-08-2007 08:58 PM

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.

shopccp 06-09-2007 08:55 AM

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.

shopccp 06-09-2007 09:02 AM

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

DataViking 07-24-2007 10:19 PM

Re: Adding the FCKeditor HTML Editor
 
very nice mod

parksmike 07-25-2007 06:04 AM

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";


PhilJ 09-22-2007 01:46 PM

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


All times are GMT -8. The time now is 03:11 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.