X-Cart forums - Adding the FCKeditor HTML Editor

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Adding the FCKeditor HTML Editor (https://forum.x-cart.com/showthread.php?t=29771)

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

Re: Adding the FCKeditor HTML Editor

Nicely done as always Phil :)

Re: Adding the FCKeditor HTML Editor

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

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.

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.

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.

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

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

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

Re: Adding the FCKeditor HTML Editor

I like one thing in the FCKeditor more than other I have try. for images you cna uplaod them from your computer. this feature is usefull for clients that don't know how to use FTP and is easier to uplaod images

Re: Adding the FCKeditor HTML Editor

FCKeditor has a new plugin for the file uploader that is really cool The listing will show thumbnails of the images, you can also delete old ones. (You can not do that with the base system in FCK) It is CKFinder, however, it will cost you $60 US per domain But well worth it in my opinion

Re: Adding the FCKeditor HTML Editor

Quote:

Originally Posted by shopccp

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

The field is 'new_var_value'.

The fckeditor is now in languages.tpl

Can you please post the code you changed/added to get this to work in languages?

Thanks

Re: Adding the FCKeditor HTML Editor

I am getting an error when I try to browse for images. It seems the editor is trying to connect to an ASP script. Has anyone else had this problem - or better, solved this problem? Other than browsing or creating folders, everything else seems to work.

Re: Adding the FCKeditor HTML Editor

Quote:

It is possible to configure FCKeditor to produce a truly semantic aware and XHTML 1.1 compliant code.

In v2.5 beta ... nice! Link

Re: Adding the FCKeditor HTML Editor

v2.5.1 now available, I've also added details on how to use it on news items, plus enable the upload system.

Re: Adding the FCKeditor HTML Editor

Quote:

Originally Posted by proboscidian

Edit fckconfig.js

On line 143 and 144 change to this:

Code:

var _FileBrowserLanguage        = 'php' ;        // asp | aspx | cfm | lasso | perl | php | py

var _QuickUploadLanguage        = 'php' ;        // asp | aspx | cfm | lasso | php

Re: Adding the FCKeditor HTML Editor

Hi Guys
I have tried this mod but this is what I get. I have gone over and over looking for what I have done wrong. Can anyone help please I would be most greatful

downloaded v2.5.1
http://www.adaptadata.btinternet.co.uk/keepthis/problem.jpg

Re: Adding the FCKeditor HTML Editor

Use the 'default' toolbar set instead...

Code:

<script type="text/javascript">

var oFCKeditor = new FCKeditor('descr');

oFCKeditor.BasePath = "../fckeditor/";

oFCKeditor.Height="200";

oFCKeditor.ToolbarSet="Default";

oFCKeditor.ReplaceTextarea() ;

</script>

Re: Adding the FCKeditor HTML Editor

Thanks Phil all is working great the only think was I could not find any file called config.php in
In /fckeditor/editor/filemanager/connectors/php/config.php
to change the code to

$Config['Enabled'] = True ;

or do I make a file called config.php

also could this be extended to use this under the webmaster mode!!

Re: Adding the FCKeditor HTML Editor

The config.php file should definitely be there, maybe get the latest version.

Re. webmaster mode.. no, it'd cause more problems than it's worth, always use a decent text editor to modify your template files.

Re: Adding the FCKeditor HTML Editor

Phil I have the latest version still can't find the config.php anyway dont worry. Thanks for your help Phil

Re: Adding the FCKeditor HTML Editor

how would you use this after install?

Re: Adding the FCKeditor HTML Editor

This rocks ... X-Cart might want to think about adding this within their 4.2 release.

Shafiq :sK

Re: Adding the FCKeditor HTML Editor

Just an FYI for language variables:

You can change all language variables to have the FCKeditor by inserting this:

<script type="text/javascript">
var oFCKeditor = new FCKeditor('var_{$lbl.name}');
oFCKeditor.BasePath = "../fckeditor/";
oFCKeditor.Height="200";
oFCKeditor.ToolbarSet="Default";
oFCKeditor.ReplaceTextarea() ;
</script>

Right before:
{/foreach}
<tr>
<td colspan="2" class="SubmitBox">

in skin1/admin/languages.tpl.

You can also get any new language variables to have the editor by inserting this:

<script type="text/javascript">
var oFCKeditor = new FCKeditor('new_var_value');
oFCKeditor.BasePath = "../fckeditor/";
oFCKeditor.Height="200";
oFCKeditor.ToolbarSet="Default";
oFCKeditor.ReplaceTextarea() ;
</script>

Right before:

</form>
{/capture}
{include file="dialog.tpl" content=$smarty.capture.dialog title=$lng.lbl_add_new_language extra='width="100%"'}

at the bottom of the same .tpl.

*HOWEVER* Adding FCKeditor to all language variables can drastically slow down a page's load time. I recommend only adding it for the language variables that really need it, like txt_welcome. Here's the initial info I inserted at the end of the form called languagespostform (around line 200, right before </form>):

<script type="text/javascript">
var oFCKeditor = new FCKeditor('var_txt_welcome');
var oFCKeditor = new FCKeditor('var_txt_conditions_customer');
var oFCKeditor = new FCKeditor('var_txt_privacy_statement');
oFCKeditor.BasePath = "../fckeditor/";
oFCKeditor.Height="200";
oFCKeditor.ToolbarSet="Default";
oFCKeditor.ReplaceTextarea() ;
</script>

I hope this helps someone else.

Re: Adding the FCKeditor HTML Editor

Hi everyone,

I have installed Phil's FAQ Manager (with the FCK editor included) but have troubles changing the FCK editor to the right path. Right now it's not working because I have it installed in my teststore (in a subfolder of my store). The default install of FAQ manager directs everything to the root.

This is the error I am having: The requested URL /fckeditor/editor/fckeditor.html was not found on this server.

I found several files with the path to /fckeditor but not the right one. Can anyone help out here?

Nico

Re: Adding the FCKeditor HTML Editor

Can't seem to get this work, uploaded fckeditor (version 2.6.3) to the root, and modified all the files in post 1 as per Phils instructions. Unfortunately there is nothing showing up when i try to add a product or do anything else. there is only the html editing box, and the fckeditor is not there. Any thoughts, or anything else i can try or check? I'm inserting the code like such in between table and form of each file mentioned

</table>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('message[body]');
oFCKeditor.BasePath = "../fckeditor/";
oFCKeditor.Height="200";
oFCKeditor.ToolbarSet="Default";
oFCKeditor.ReplaceTextarea() ;
</script>
</Form>

Re: Adding the FCKeditor HTML Editor

X-Cart Development Team should think about and offer it by default editor inside all future versions. This is the best WYSIWYG editor I've ever used. Nice post!

Re: Adding the FCKeditor HTML Editor

Quote:

Originally Posted by shorelineoftahoe

Just an FYI for language variables:

*HOWEVER* Adding FCKeditor to all language variables can drastically slow down a page's load time. I recommend only adding it for the language variables that really need it, like txt_welcome. Here's the initial info I inserted at the end of the form called languagespostform (around line 200, right before </form>):

<script type="text/javascript">
var oFCKeditor = new FCKeditor('var_txt_welcome');
oFCKeditor.BasePath = "../fckeditor/";
oFCKeditor.Height="200";
oFCKeditor.ToolbarSet="Default";
oFCKeditor.ReplaceTextarea() ;
</script>

Thanks but this does not work for me in 4.1.8

I get ERROR: Textarea with this id number var_txt_welcome not found

in skin1/admin/main/languages.tpl.

Cheers

Re: Adding the FCKeditor HTML Editor

A general problem I have just noticed with this is that how does a client delete unwanted files and images that are loaded up to the userfiles folder - the standard fck file manager does not have that capacity - without purchasing their image manager CKFinder.

Cheers

Re: Adding the FCKeditor HTML Editor

does this affect webmaster mode?

Re: Adding the FCKeditor HTML Editor

Does anyone know how to add fckeditor to 4.2.0?

Re: Adding the FCKeditor HTML Editor

Quote:

Originally Posted by logz05flor

Does anyone know how to add fckeditor to 4.2.0?

I used the instructions here. Don't remember doing anything special.

Re: Adding the FCKeditor HTML Editor

Just updated the code, so it can be enabled/disabled from within 'modules' :)

Re: Adding the FCKeditor HTML Editor

what about webmaster mode?

Re: Adding the FCKeditor HTML Editor

Nice one.Because i can't upload image with the default editor.So i add a post new to get the plugin to add image.
But balinor direct me here and i integrate it and it is working fine now.
FYI:
I am bit lazy biy so i feel sad to edit each and every(where ever editor present ).
So what i did is
I added this code to the textarea.tpl
And it even simplify the process.:D/:D/
:D/

Re: Adding the FCKeditor HTML Editor

i cant able to upload images using this editor too.
I am getting the error as "Error creating folder 'redirect:/cdseo.php/ ' (can't create redirect directory)".
Anybody got this error?
Any fix for this?

Re: Adding the FCKeditor HTML Editor

Likely just a path or permissions issue, check...

/fckeditor/editor/filemanager/connectors/php/config.php

Code:

$Config['UserFilesPath'] = '/userfiles/' ;

Try changing it to a different directory.

Eg. if your store resides in /store, try...

Code:

$Config['UserFilesPath'] = '/store/userfiles/' ;

Ensure the userfiles directory is writable (CHMOD 777)

Re: Adding the FCKeditor HTML Editor

Thanks and i got it and working fine now.

Re: Adding the FCKeditor HTML Editor

I follow PhilJ instructions and it works great in v4.2.1 thanks for the great mod.

One question though, does anyone know how incorporate the editor into the extended tabs mod from xcarmods?

Thanks,
Ray