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

Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 09-18-2006, 06:44 PM
 
gobligoo gobligoo is offline
 

Member
  
Join Date: Sep 2005
Posts: 26
 

Default Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19

Hi

I just installed the openWYSIWYG 1.0 from DynamicDrive as mffowler somewhere introduced in this thread: http://forum.x-cart.com/showthread.php?t=7407. The thread is old and looong so to cut down on confused minds, i dare myself to make this guide, because there is couple of other WYSIWYG editor mentioned in the thread above as well. I tried both of them and they didn’t work on my X-cart 4.0.19. But I tried this one and its really one simple and excellent opensource (cross browser) WYSIWYG editor.
Wanna see it in action? Visit http://www.dynamicdrive.com/dynamicindex16/openwysiwyg.
You can probably use this all over where you want an editor. I have only made a guide for product (short and full) descriptions, and the same for international descriptions.

For all newbies (like me) i will guide you thru step by step

Thank you mffowler for introducing this opensource (cross browser) WYSIWYG editor for me

Guide:

1. Download the wysiwyg_beta.zip www.dynamicdrive.com/dynamicindex16/openwysiwyg/wysiwyg_beta.zip

2. Extract the .zip file to the directory admin on root level
(The .zip contains three folders -icons, popups and styles- and the wysiwyg.php, dont extract the example.html and readme.html)

3. Chmod the directory icons and popups with 755, chmod the contents of these directorys with 644

4. Open up admin/wysiwyg.js
Find this code (almost on the top)
Code:
// Images Directory imagesDir = "/icons/"; // CSS Directory cssDir = "/styles/"; // Popups Directory popupsDir = "/popups/";
and replace it with this:
Code:
// Images Directory imagesDir = "../admin/icons/"; // CSS Directory cssDir = "../admin/styles/"; // Popups Directory popupsDir = "../admin/popups/";

5. Open skin1/single/home.tpl and just add

Code:
<script language="JavaScript" type="text/javascript" src="../admin/wysiwyg.js"></script>
Right before the closing </HEAD> tag in skin1/single/home.tpl

6. Now we will add the WYSIWYG editor to the short product description.
Open skin1/main/product_details.tpl and find this line:

Code:
<TEXTAREA name="descr" cols="45" rows="8" class="InputWidth">{$product.descr|escape:"html"}</TEXTAREA>
and replace it with this:
Code:
<TEXTAREA name="descr" cols="45" rows="8" class="InputWidth" id="wysiwyg1">{$product.descr|escape:"html"}</TEXTAREA>
Now just add:
Code:
<script language="JavaScript"> generate_wysiwyg('wysiwyg1'); </script>
directly after the </TEXTAREA>

7. Now we will add the WYSIWYG editor to the full product description.
Open skin1/main/product_details.tpl and find this line:
Code:
<TEXTAREA name="fulldescr" cols="45" rows="12" class="InputWidth">{$product.fulldescr|escape:"html"}</TEXTAREA>
and replace it with:
Code:
<TEXTAREA name="fulldescr" cols="45" rows="12" class="InputWidth" id="wysiwyg2">{$product.fulldescr|escape:"html"}</TEXTAREA>
Now just add:
Code:
<script language="JavaScript"> generate_wysiwyg('wysiwyg2'); </script>
directly after the </TEXTAREA>


Do you see any changes in the codes quoted in 6 and 7?
id="wysiwyg1 and id="wysiwyg2
Well we just added two editors, ergo 1 and 2.

Thats it!


--==International description==-- For multilanguage sites

1. Now we will add the WYSIWYG editor to the short product description.
Open skin1/main/products_lng and find this line:
Code:
<TEXTAREA cols="45" rows="8" name="product_lng[descr]" class="InputWidth">{$product_languages.descr|escape:"html"}</TEXTAREA>
and replace with this:
Code:
<TEXTAREA cols="45" rows="8" name="product_lng[descr]" class="InputWidth" id="wysiwyg3">{$product_languages.descr|escape:"html"}</TEXTAREA>
Now just add:
Code:
<script language="JavaScript"> generate_wysiwyg('wysiwyg3'); </script>
directly after the </TEXTAREA>


2. Now we will add the WYSIWYG editor to the full product description.
Open skin1/main/products_lng and find this line:
Code:
<TEXTAREA cols="45" rows="12" name="product_lng[full_descr]" class="InputWidth">{$product_languages.full_descr|escape:"html"}</TEXTAREA>
and replace it with:
Code:
<TEXTAREA cols="45" rows="12" name="product_lng[full_descr]" class="InputWidth" id="wysiwyg4">{$product_languages.full_descr|escape:"html"}</TEXTAREA>
Now just add:
Code:
<script language="JavaScript"> generate_wysiwyg('wysiwyg4'); </script>
directly after the </TEXTAREA>

Thats it folks. I have not modded or done anything. I just wanted some newbies like me to get their own editor. As i wrote in the beginning of the thread, i tried out two other editors, but did not make them work on my X-cart 4.0.19 (htmlarea and FCKeditor)

Just wanna add that it works great in my IE 6.X and IE 7.0, and also in Firefox 1.5.0.7.


Chears
__________________
X-cart 4.0.19 (Unix)
--==::wicked::==--
Reply With Quote
  #2  
Old 10-20-2006, 08:25 AM
 
candleshopcreations candleshopcreations is offline
 

Senior Member
  
Join Date: Aug 2006
Location: Okinawa
Posts: 118
 

Question Re: Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19

well, I implemented this ok. sort of. Obviously a no go in Safari, its messed up in IE (which I could care less), and LOOKS ok in firefox. However, in firefox when i edit the descriptions the long descriptions overwrites the short descriptions. and I cannot fix it even if i go back to safari. whatever i set as the long description in firefox w/ the editor is IT.

EDITED: I'm going to leave this post in case someone else does the same thing I just did! I edited the products_lng file for the long description edit instead of the products_details file. be careful! Following the above directions works for Firefox 1.5, but not IE 5.2 for macs-IE shows the editor but not the text previously entered.

Thanks,
__________________
Andrea
www.candleshopcreations.com

Xcart 4.3.2
Mac OSX 10.6.5
EWD Hosting
Mailchimp Mod, On Sale,
One Page Checkout, Mobile
Reply With Quote
  #3  
Old 10-25-2006, 09:13 AM
  moneysaver67's Avatar 
moneysaver67 moneysaver67 is offline
 

Advanced Member
  
Join Date: Nov 2005
Posts: 74
 

Default Re: Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19

Sweet stuff! Works great here!

Personally, I'd opt for FCKEditor or TinyMCE, but this is nice for the interim.

BTW, I chose to create the directory wysiwyg rather than admin. It is much more self documenting, and makes more sense IMO.

For others who wish to do the same, simply substitute 'admin' for 'DIR NAME OF YOUR CHOICE' in the referenced example above.

Nice stuff, thank you!
__________________
X-Cart 4.0.16-.19 Gold [unix] / DSEFU
Reply With Quote
  #4  
Old 10-30-2006, 10:20 AM
 
consolep consolep is offline
 

Member
  
Join Date: Jun 2006
Posts: 17
 

Default Re: Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19

Awesome! this will be a must install in my site thanks for taking time out fo your life to make such an important mod and sharing it. I appreciate it. I also applied it to the static pages
__________________
Xcart v4.0.18 Current one
Reply With Quote
  #5  
Old 10-31-2006, 11:12 AM
 
jeff819 jeff819 is offline
 

Advanced Member
  
Join Date: May 2006
Posts: 42
 

Default Re: Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19

Now please excuse the newbie question, but now that I have the WYSIWYG-EDITOR installed, how do I actually use it?

I'm using Firefox and I don't know how to start using it.

Thanks,
Jeff
__________________
X-Cart Gold - Version 4.0.19
Reply With Quote
  #6  
Old 10-31-2006, 11:19 AM
  moneysaver67's Avatar 
moneysaver67 moneysaver67 is offline
 

Advanced Member
  
Join Date: Nov 2005
Posts: 74
 

Talking Re: Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19

Simply go into the Admin section of X-Cart, click on Categories on the left hand side, and then add/select a product. The WYSIWYG editors should now be present for Short/Long descriptions of your cart product details page.
__________________
X-Cart 4.0.16-.19 Gold [unix] / DSEFU
Reply With Quote
  #7  
Old 01-24-2007, 01:13 PM
 
balinor balinor is offline
 

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

Default Re: Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19

Anyone tried this on static pages for 4.0.x yet? Installed fine and shows up, but when you save it just goes back to plain old text
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #8  
Old 04-11-2008, 06:06 AM
  phicaloma's Avatar 
phicaloma phicaloma is offline
 

Advanced Member
  
Join Date: Nov 2007
Location: Paris - France
Posts: 34
 

Default WYSIWYG editor for 4.1.9 ?

Hello evreybody,
I tried to implement this mod (as I use Openwysiwyg on a standalone page to get proper html code) to get a working wysiwyg editor on the product details page:
http://forum.x-cart.com/showthread.php?t=25052&highlight=wysiwyg

Alas... The code is different between 4.0 and 4.1.9 and I didn't achieve the mod.
Has someone tried this on 4.1.9...
I am very unhappy with the editor provided by X-Cart (and doesn't seem to be the only one) which doesn't work properly and add quantities of tab and blank lines to the code every time you call it.

Thank you for your help
__________________
X-Cart Gold 4.1.9 - 4.2.0 - 4.2.2
Telafirma: Dynamic Images, Narrow by Manufacturer, Product Page manufacturer, Static Pages Categories, Multicolumn Recommends
Firetank Software: Featured Products, Feed Manager, Newest Products, Sitemap Pro, Marketing Manager
Xcartmods: Ultimate Minicart, 4 Level Horizontal (and Vcal) Flyout

BCSE: Reviews Edit, Multiple Upselling
MagenticOne: Tag Cloud, Store Manager, Custom Data Feed
Websitecm: Xnews, Xnews SEO, CDSEO Pro
Jon Langevin: Gone With The Wind !
Reply With Quote
  #9  
Old 04-11-2008, 06:31 AM
 
balinor balinor is offline
 

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

Default Re: Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19

Hi phicaloma, I have moved your post into the thread you reference, seems to make more sense than posting a new thread
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #10  
Old 05-30-2008, 05:03 AM
 
toolexperts toolexperts is offline
 

eXpert
  
Join Date: Feb 2008
Location: Knoxville, TN
Posts: 289
 

Default Re: Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19

anyone try this in 4.1.x?
__________________
Tool Experts
X-Cart DB Version: 4.1.12 GOLD
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 07:05 AM.

   

 
X-Cart forums © 2001-2020