X-Cart forums - Excellent WYSIWYG-EDITOR (cross browser)

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

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

- - Excellent WYSIWYG-EDITOR (cross browser) - tested in 4.0.19 (https://forum.x-cart.com/showthread.php?t=25052)

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