TextAreaPro v1.0
The free WYSIWYG editor
Visit our website at AKwebtools.com


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

  1. Download the latest version from the TextAreaPro homepage.
  2. Unzip the files onto your local computer (making sure to maintain the directory structure contained in the zip).
  3. Create a new folder on your website called /TextAreaPro/ (make sure it's NOT inside the cgi-bin).
  4. Transfer all the TextAreaPro files from your local computer into the /TextAreaPro/ folder on your website.
  5. 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:
  1. First highlighted codes are placed in the tags.
  2. 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);



* For further information and question, please go to AKwebtools.com *