[MOD] WYSIWYG editor for image description

[MadSci]

Ok so finally I figure that one out:

DIFFICULTY LEVEL: easy
TIME TO COPLETE: about 5 min
FILE TO EDIT: member_uploadform.html in your templates directory
WYSIWYG EDITOR: WyzzEditor v0.62 -->http://www.wyzz.info

1. Download the WyzzEditor and extract on your disk. You will see 2 folders and one js script. Upload all 3 in your currant template folder.
2. Open the wyzz.js for editing.

Find the following regions:

Code: [Select]

// Edit region stylesheet
editstyle = 'wyzzstyles/editarea.css';

// Style Sheet
document.write('<link rel="stylesheet" type="text/css" href="wyzzstyles/style.css">\n');


toolbar += '<td style="width: 22px;"><img src="wyzzicons/' +buttonName[btn]+ '.gif" border=0 unselectable="on" title="' +buttonName[btn]+

toolbar2 += '<td style="width: 22px;"><img src="wyzzicons/' +buttonName2[btn]+ '.gif" border=0 unselectable="on" title="' +buttonName2[btn]+
and edit the HREF and SRC to have the full link to the styles and icons like:

Code: [Select]

editstyle = 'wyzzstyles/editarea.css';
editstyle = 'http://www.yoursite.com/4images/templates/your_template/wyzzstyles/editarea.css';

NOTE: edit only the HREF and SRC nothing else

3. Open the meber_uploadform.html and on top of:

Code: [Select]

<form method="post" action="{url_member}" enctype="multipart/form-data"
paste this:

Code: [Select]

<script language="JavaScript" type="text/javascript" src="http://www.yoursite.com/4images/templates/your_template/wyzz.js"></script>

and then goto:

Code: [Select]

<td class="cat1"> <textarea name="image_description" cols="30" class="textarea" rows="10" wrap="VIRTUAL">{image_description}</textarea>

edit to:

Code: [Select]

<td class="cat1"> <textarea name="image_description" id="textfield" cols="30" class="textarea" rows="10" wrap="VIRTUAL">{image_description}</textarea>

Note: the ID element was inserted

and then add right under the textarea:

Code: [Select]

<script language="javascript1.2">make_wyzz('textfield');</script>
      

save and test.

Hope you like it.

ms

Troubleshooting:
1. its not working: check your links


PS one more thing:

examine the config guidelines in wyzz.js so you can customize your editor. You can add or remove butons, set the W and H of the editor as well as show and hide bars.

ms

[thunderstrike]

<script language="JavaScript" type="text/javascript" src="http://www.yoursite.com/4images/templates/your_template/wyzz.js"></script>

for:

Code: [Select]

<script language="JavaScript" type="text/javascript" src="{template_url}/wyzz.js"></script>