Viewing file:  README.html (12.64 KB) -rw-rw-rw-
Select action/file-type:
 (+) | (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
TextAreaPro Help
Introduction back to top
What is TextAreaPro?
TextAreaPro is a free WYSIWYG (what you see is what you get) editor replacement for <textarea> fields.
It can also be used as an alone web editor. This requires a IE 5.5+ browser to run it. Other browsers will see
a regular <textarea> field. By adding a few simple lines of JavaScript to your web page you can have a rich text
editor that let your users do the following
- Format text to be bold, italicized, or underlined.
- Change the face, size, style and colour.
- Left, centre, or right-justify paragraphs.
- Make bulleted or numbered lists.
- Indent or un-indent paragraphs.
- Insert a horizontal line.
- Insert hyperlinks and images.
- View the raw HTML source of what they're editing.
- and much more...
Is it really free?
Yes! It's really free.
Requirements back to top
What are the browser requirements?
TextAreaPro requires Internet Explorer 5.5 or better on Windows to run. This is because it
makes use of some advanced features of IE5.5 that aren't available in other browsers yet.
It is backwards compatible with other browsers, though. They will get a regular textarea
field instead of a WYSIWYG editor.
Can I see an example of what it looks like?
Sure, make sure you're using IE5.5 or better on windows and see below.
Here is a regular <textarea> field.
And here is a <textarea> transformed with TextAreaPro.
Where can I find out more info and download the latest version?
You can find out more about TextAreaPro and download the latest version on the
TextAreaPro homepage.
Installation / Setup back
to top
How do I add TextAreaPro to my web page?
It's easy, first you need to upload the TextAreaPro files to your website. Just
follow these steps:
- Download the latest version from the TextAreaPro
homepage.
- Unzip the files onto your local computer (making sure to maintain the
directory structure contained in the zip).
- Create a new folder on your website called /TextAreaPro/ (make sure it's
NOT inside the cgi-bin).
- Transfer all the TextAreaPro files from your local computer into the /TextAreaPro/
folder on your website.
- Open the example page /TextAreaPro/index.html with your browser to make
sure everything works.
Once TextAreaPro is on your website all you need to do is add some JavaScript codes
to any pages that you want to add WYSIWYG editors to. Here's how to do that.
<html>
<head>
<title>WYSIWYG Editor 1.0</title>
| <script language="Javascript1.2"> |
| | //Directory must end with a '/' |
| | //Examples: |
| | // AK_editor_url = "TextAreaPro/"; |
| |
AK_editor_url = ""; |
| | document.write('<scr' + 'ipt src="' + AK_editor_url+ 'wysiwyg.js" language="Javascript1.2"></scr' + 'ipt>'); |
| </script> |
</head>
<body text="#000000" bgcolor="#FFFFFF">
<form>
<textarea cols="90" rows="20" name="MyTextAreaName">
<font size="+1" color="#0000ff">TESTING</font> <<<<<<<<<<<<<<<<<<<<<<<<<< Default Text
</textarea>
| <script language="JavaScript"> |
| | //comment any button that you want to hide |
| | var AK_DisplayedButtons = Array( |
| | | 'FontName', |
| | | 'FontSize', |
| | | 'SelectAll', |
| | | 'Delete', |
| | | 'Cut', |
| | | 'Copy', |
| | | 'Paste', |
| | | 'SaveAs', |
| | | 'Print',
| | | | 'Separator', |
| | | 'Bold', |
| | | 'Italic', |
| | | 'Underline', |
| | | 'Strikethrough', |
| | | 'Separator', |
| | | 'JustifyLeft', |
| | | 'JustifyCenter', |
| | | 'JustifyRight', |
| | | 'JustifyFull', |
| | | 'Separator', |
| | | 'InsertOrderedList', |
| | | 'InsertUnorderedList', |
| | | 'Outdent', |
| | | 'Indent', |
| | | 'Separator', |
| | | 'SuperScript', |
| | | 'SubScript', |
| | | 'Separator', |
| | | 'InsertHorizontalRule', |
| | | 'CreateLink', |
| | | 'Unlink', |
| | | 'Image', |
| | | 'Table', |
| | | 'SpecialChars', |
| | | 'Separator', |
| | | 'Forecolor', |
| | | //'Backcolor', |
| | | 'Separator', |
| | | //'Date', |
| | | 'ChangeMode', |
| | | 'Separator', |
| | | 'Help' //the last one has NO comma |
| | | ); |
| | var AK_width = 600; |
| | var AK_height = 300; |
| |
// All fields are optional. Place "null" where you don't want to specify. |
| | //ak_wysiwyg_generator(width, height, "TextAreaName", DisplayedButtonList); |
| | ak_wysiwyg_generator(AK_width, AK_height, "MyTextAreaName", AK_DisplayedButtons); |
| |
//Examples: |
| | // ak_wysiwyg_generator(null, null, "MyTextAreaName", AK_DisplayedButtons); |
| | // ak_wysiwyg_generator(AK_width, AK_height, null, AK_DisplayedButtons); |
| | // ak_wysiwyg_generator(AK_width, AK_height, "MyTextAreaName", null); |
| |
// It can be no parameter at all |
| | // ak_wysiwyg_generator(); |
| </script> |
<input type="Submit">
</form>
</body>
</html>
Note:
- First highlighted codes are placed in the tags.
- Second highlighted codes are placed right after the text area that is going to be replaced.
How do I add TextAreaPro to my web page as an alone web editor?
Place "null" at the textarea name field:
ak_wysiwyg_generator(AK_width, AK_height, null, AK_DisplayedButtons);
|