Hi All
A few years ago we licensed the FCK Editor, which is a WYSIWYG editor for the admin area so that you can use common word processor like features to editor your product descriptions and much more. This editor has since ceased development and has been replaced by the new CK Editor. It is a complete rewrite for modern browsers, is more efficient and contains new functionality.
Anyone within their support period can download the CK Editor at these locations:
For ASP...
http://www.ecommercetemplates.com/downloads.asp?dlid=ckeditorasp
For PHP...
http://www.ecommercetemplates.com/downloads.asp?dlid=ckeditorphp
You just need to copy the ckeditor directory to your vsadmin directory. Then in your includes.asp/php file just add the line...
htmleditor="ckeditor"
$htmleditor="ckeditor";
Remember if you are currently using the FCK Editor to change that setting from fckeditor to ckeditor.
To support the CK Editor you will need the very latest v6.2 updater just released...
http://www.ecommercetemplates.com/updaters.asp

The FCK Editor and CK Editor can live side by side quite happily so you can maintain the old FCK Editor until you are happy the new CK Editor performs as you require. But once tested it is recommended to remove the old editor. To do this just delete the directory...
vsadmin/editor/
...and also the 4 FCK files...
vsadmin/fckconfig.js
vsadmin/fckeditor.js
vsadmin/fckstyles.xml
vsadmin/fcktemplates.xml

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Yep, your new phpupdater6.2 did the trick. Thanks for the quick fix Vince.

I will share one tip for other ECT users however ...
The old FCK Editor used break tags at the end of each line, like <br />
The new CK Editor uses <p>paragraph</p> tags, which is better practice really.

BUT now, when you go to Modify your existing ECT pages, be aware that CK Editor will automatically insert <p> tags into your HTML page code, meaning that you will have BOTH <p> and <br /> tags throughout, causing double-spaced content.

And the same will happen if you edit your Email Messages.

So ... you will need to go into "Source Code" view to clean out all the <br /> tags entered by the old FCK Editor. Will be painful maybe for those with heaps of existing pages wishing to use this upgrade, unless you just leave those pages alone.

Worth the trouble I think, because the new CK Editor is much better.

Gary Flack
I.T.ZAP Website Design Works
http://itzap.com.au

Found out there is an easy way to configure CK Editor to insert <br /> break tags whenever the user presses "Enter" ... if that is what you really want (or need).

(1) In the "ckeditor" folder, open the file named "config.js"
(2) See these lines of code ...

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

(3) Underneath those entries, simply add this line ...
config.enterMode = CKEDITOR.ENTER_BR;

(4) Save file and upload.
(5) Test CK Editor. Confirmed that this config code does work.

This solution was found on the CK Source Forum :
http://cksource.com/forums/viewtopic.php?f=5&t=26552&p=67551&hilit=config.enterMode#p67551
and also
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode

The default behavior for Enter key is <p> paragraph tags. Note their comment :
It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness. The editor is optimized for this setting.

Default behavior for Shift+Enter is <br />, as usual.

Gary Flack
I.T.ZAP Website Design Works
http://itzap.com.au

I have just installed the new ckeditor on my asp site. However, in the editing boxes all I am seeing is the background image of my site.
See my uploaded screenshot here:
http://www.vwheaven.com.asp1-22.dfw1-1.websitetestlink.com/ss01.jpg

When I look at the editor box in html mode, I can see my text:
http://www.vwheaven.com.asp1-22.dfw1-1.websitetestlink.com/ss02.jpg

How do I get rid of the background it is pulling so that I can just view my product descriptions?

Thanks in advance.
C-

Having researched and fiddled, here is your SOLUTION to the BACKGROUND COLOR or IMAGE ISSUE in CK Editor ...

(1) Look in your website folder named ..\vsadmin\ckeditor
(2) Open the file named config.js in your favourite HTML editing software.

(3) Now, on line number 38 (or thereabouts), notice that it says :
config.contentsCss = '../style.css';

That calls in the standard Ecommerce Templates CSS style sheet located in the website root folder. (The website style sheet provided with most Templates.)
And that is why your website background color (or image) appears inside the CK Editor window. (Bad.)
But all your other website styles should also take effect as well inside CK Editor. (Good for most customers !)

(4) Solution ... Change line 38 in config.js to say :
config.contentsCss = '../ckeditor.css';
==> SAVE and UPLOAD the modified config.js file to your server.

(5) Open the file "style.css". Next do a File ... Save As ... ckeditor.css
Make sure you save ckeditor.css in the root folder of your website, where the style.css file exists.
==> Note : If you wish to save the "ckeditor.css" style sheet file with others in some particular folder, like "../css/ckeditor.css", then you simply modify the file path in the CK Editor "config.js" file accordingly ... as described in step (4) above. (janhall_us1 asked how to do this.)

(6) Close style.css. Leave that file as is.

(7) Open the new "ckeditor.css" file that you just created.
Look for the "body" tag in the style sheet, which most likely is where the "background-color" or "background-image" style has been applied. (If not "body", then find whatever style applies the background.)
==> Simply DELETE that background style entry.
Alternatively, you could change the color to White : background-color: #FFFFFF;
==> Also, you can change any other undesirable styles in ckeditor.css as you like, without affecting the appearance of your actual website.
==> Ditch all the styles that apply to stuff outside the page content area ... Top Banner, Menu Nav, Log-In, Shopping Cart, Footer ... not required and will narrow down the Styles List displayed in the CK Editor toolbar to just those that you really want.
==> When done, SAVE and UPLOAD the ckeditor.css file to your server.

(8) Login to your ECT Website Administration Panel. Modify any Product or Category. Check the CK Editor windows. All should be good now.
==> Note : Internet Explorer 10 does not work well with CK Editor. Some drop-down selectors in the Toolbar do not function. Use Firefox or Chrome instead.

Hope that helps. There are numerous threads in the ECT Forum mentioning this issue.

Regards,

Gary Flack
I.T.ZAP Website Design Works
http://itzap.com.au

Hi Gary
Thanks very much indeed for sharing that solution!

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

What about this slight alteration to ITZAP's method --

In config.js, change line #38 from this...
config.contentsCss = '../style.css';

to this...
config.contentsCss = 'ckstyle.css';

Then save the new ckeditor.css file in the ckeditor folder in vsadmin. My reasoning is that ckeditor css file is now stored with the other ckeditor stuff, not out in the root directory where I'll forget what the point of it was.

Also, if you are using the new ECT WordPress template, the style.css file is not in the root. It is hidden here:

wp-content/themes/yourThemeName/style.css

Replace yourThemeName with the actual name of the theme you are using.

--DeeAnna

Classic Bells, Postville, Iowa, USA, http://classicbells.com/

Hello. I just replaced the FCK Editor with the new CK Editor. I removed the FCK Editor as described (deleted the editor directory from the vsadmin folder and all four files fckconfig.js, fckeditor.js, fckstyles.xml and fcktemplates.xml and changed the includes page to $htmleditor="ckeditor";) Now when I open any of the products or try to add a new one both the Description: and Long Description: boxes have a dark blue background and black text. When I try to change them (background to white and text to any color) nothing happens.
And yes I'm up to date with the updaters. I'm at 6.2.8

Hi Paul
By default the CK Editor is set to make the styles in your stylesheet available but this may be the reason you are seeing those colors. Can you look in the file ckeditor/config.js for this line...
config.contentsCss = '../style.css';
...and change that to anything like...
config.contentsCss = '../xxxstyle.css';
The do a <Ctrl>+Refresh to refresh the page and see if that helps.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Tom,

If you go back to Page 2 of this topic and follow Steps (1) to (8) carefully, then you cannot fail.

http://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=90564&whichpage=2

The key is modifying the CK Editor "config.js" file as explained, and then upload the modified file to your server.
Create a new "ckeditor.css" style sheet file for this special purpose, and upload that file to the server as well.
Don't use your website "style.css" file for CK Editor, leave that alone.

==> The file path pointing to the "ckeditor.css" style sheet must be correct, as explained in Step (5). Otherwise ... the styles will not take effect when using CK Editor. So do double-check that.

Also, in the "ckeditor.css" sheet, highly recommend Step (7) ... "Ditch all the styles that apply to stuff outside the page content area ... Top Banner, Menu Nav, Log-In, Shopping Cart, Footer, etc."

The CSS style sheet then loads faster and works better. Really, the only styles that CK Editor needs is Headings H1, H2, H3, etc, paragraph and list style, image floats left and right ... not much else.

Try that Tom.

Gary Flack
I.T.ZAP Website Design Works
http://itzap.com.au

How do I stop the ckeditor putting a <p> </p> in the short description.

Thanks in advance.

Regards
Carl

Hi Carl on page 1 of this post Gary outlined how to change the paragraph tags to break tags as well as links to the ckeditor documentation. http://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=90564&whichpage=1

Winners never quit, quitters never win
User Manual for Ecommerce Templates

Hi Carl,
I suggest you don't worry about the <p> paragraph tags that CK Editor enters into the Short Description. They do not matter.
Rather, if you wish to eliminate or reduce the spacing caused by those <p>paragraph</p> tags, then add this to your CSS style sheet ...

div.proddescription p, div.catdesc p {
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

Enter whatever pixel spacing values you desire.

Gary Flack
I.T.ZAP Website Design Works

Is it ok to download the ckEditor directly from their site or you recommend using the download available through ect download request?

Hi,
You need to download the ECT one, it's been altered to suit the software
http://www.ecommercetemplates.com/free_downloads.asp#htmleditor



* Moving Servers?
* Database Migrations
* Database Conversions
* Access to MySql
* SQL to MySql
* ASP to PHP
**Buy The PHP Capture Card Plugin**
Rate Our Services/View Our Feedback

Is there any reference material to go with this editor? I am seeing that the edit field displays the header and footer style, and it is cumbersome to write in it. Also, how does one add images to the content? and can styles be added to wrap text around an image,whether left or right setting this up in the ckeditor content field?

What would need to be done to use the new ckeditor that has the advanced features of like inserting images, media or forms via a dialog window into the content?.Can this even be done? Does the current one allow for this to happen?

Maybe watch this Video which demonstrates how you can insert an image directly into the body of a webpage using CK Editor. And then, if desired, align your photograph to the Center or Right hand side of the page.
http://itzap.com.au/how-to-insert-an-image-directly-into-the-body-of-a-webpage.php

Yes, you can apply styles in CK Editor.
>> Best to use a separate CSS style sheet especially for CK Editor named ckeditor.css, as explained on Page 2 of this topic.
The reason is 2 fold.
First, to toss out all the classes that CK Editor simply does not need. Get rid of Banner, Sidebar Menu, Footer and ECT Shopping Cart styles. Trim it right down to leave just Headings, Floats, special Divs and some Colour styles that the Website Administrator will use in the page content area.
Second, CK Editor requires styles to be entered in a special way, defining both an Element and a Class in the rule, before they will appear in the "Styles" drop down menu where they can be easily selected and applied.

So, for example, in your main website styles.css sheet you would have an entries like ...
.right { /* Float image off to Right side */
float: right;
margin-left: 15px;
}
.left { /* Float image Left side */
float: left;
margin-right: 15px;
}
.dropshadow {
box-shadow: 5px 5px 5px #aaaaaa;
}
/* Just a few colours */
.red {
color: #C00;
}
.blue {
color: #33F;
}
.green {
color: #090;
}
.big {
font-size: 1.2em;
font-weight: normal;
}
.bigbold {
font-size: 1.2em;
font-weight: bold;
}
.vip {
color: #820000;
font-weight: bold;
}

But for CK Editor, in the ckeditor.css file, if you want the very same Classes to appear in the "Styles" dropdown menu, then you need to enter ...
img.right { /* Float image off to Right side */
float: right;
margin-left: 15px;
}
img.left { /* Float image Left side */
float: left;
margin-right: 15px;
}
div.dropshadow {
box-shadow: 5px 5px 5px #aaaaaa;
}
/* Just a few colours */
span.red {
color: #C00;
}
span.blue {
color: #33F;
}
span.green {
color: #090;
}
span.big {
font-size: 1.2em;
font-weight: normal;
}
span.bigbold {
font-size: 1.2em;
font-weight: bold;
}
span.vip {
color: #820000;
font-weight: bold;
}

And the effect of those style classes will then be applied and become visible to the Website Administrator inside the CK Editor panel. Hope that helps.
Gary Flack, I.T.ZAP Website Design Works