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