Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?



Find us on Facebook

Follow us on Twitter

View our YouTube channel


 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 CK Editor for WYSIWYG editing in the admin area
 New Topic  Reply to Topic
 Printer Friendly
Next Page
Author Previous Topic Topic Next Topic
Page: of 2

Vince
Administrator

Spain
37095 Posts

Posted - 08/30/2012 :  07:03:36  Show Profile
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

ITZAP
Ecommerce Template Expert

Australia
729 Posts

Pre-sales questions only
(More Details...)

Posted - 08/31/2012 :  04:25:02  Show Profile
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
Go to Top of Page

ITZAP
Ecommerce Template Expert

Australia
729 Posts

Pre-sales questions only
(More Details...)

Posted - 08/31/2012 :  21:50:08  Show Profile
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 :
[url]http://cksource.com/forums/viewtopic.php?f=5&t=26552&p=67551&hilit=config.enterMode#p67551[/url]
and also
[url]http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode[/url]

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
Go to Top of Page

theworkhorse
New Member

56 Posts

Pre-sales questions only
(More Details...)

Posted - 01/02/2013 :  14:26:15  Show Profile
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-
Go to Top of Page

ITZAP
Ecommerce Template Expert

Australia
729 Posts

Pre-sales questions only
(More Details...)

Posted - 01/02/2013 :  18:16:06  Show Profile
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

Edited by - ITZAP on 05/16/2013 21:42:52
Go to Top of Page

Vince
Administrator

37095 Posts

Posted - 01/02/2013 :  19:02:52  Show Profile
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
Go to Top of Page

DeeAnna
Advanced Member

USA
219 Posts

Posted - 02/24/2013 :  15:27:13  Show Profile
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/
Go to Top of Page

PaulP
Advanced Member

USA
112 Posts

Posted - 05/10/2013 :  13:54:00  Show Profile
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.Angry
And yes I'm up to date with the updaters. I'm at 6.2.8

Edited by - PaulP on 05/10/2013 13:57:34
Go to Top of Page

Vince
Administrator

37095 Posts

Posted - 05/10/2013 :  14:09:48  Show Profile
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
Go to Top of Page

ITZAP
Ecommerce Template Expert

Australia
729 Posts

Pre-sales questions only
(More Details...)

Posted - 05/16/2013 :  20:52:16  Show Profile
Hi Tom,

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

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

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

Edited by - ITZAP on 05/16/2013 21:12:31
Go to Top of Page

carl1963
Ecommerce Template Expert

United Kingdom
600 Posts

Pre-sales questions only
(More Details...)

Posted - 07/12/2013 :  13:59:47  Show Profile
How do I stop the ckeditor putting a <p> </p> in the short description.

Thanks in advance.

Regards
Carl Cool
Go to Top of Page

Sinbad
Administrator

65622 Posts

Posted - 07/12/2013 :  16:38:49  Show Profile
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
Go to Top of Page

ITZAP
Ecommerce Template Expert

Australia
729 Posts

Pre-sales questions only
(More Details...)

Posted - 07/12/2013 :  20:48:37  Show Profile
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

Edited by - ITZAP on 07/12/2013 20:49:44
Go to Top of Page

Pinkiguana
New Member

USA
76 Posts

Pre-sales questions only
(More Details...)

Posted - 01/21/2014 :  13:53:06  Show Profile
Is it ok to download the ckEditor directly from their site or you recommend using the download available through ect download request?
Go to Top of Page

Phil
ECT Moderator

United Kingdom
6616 Posts

Posted - 01/21/2014 :  14:05:31  Show Profile
Hi,
You need to download the ECT one, it's been altered to suit the software Smile
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
Go to Top of Page

Pinkiguana
New Member

USA
76 Posts

Pre-sales questions only
(More Details...)

Posted - 01/21/2014 :  15:02:28  Show Profile
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?
Go to Top of Page
Page: of 2 Previous Topic Topic Next Topic  
Next Page
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2018 ecommercetemplates.com Go To Top Of Page
This page was generated in 0.02 seconds. Snitz Forums 2000