HyperTextArea FAQ

What is HyperTextArea?

HyperTextArea is a WYSIWYG (What you see is what you get) editor that can be integrated into your web pages.  Generally, you will use it in place of a <textarea/> element where you want your users to be able to type nicely formatted text without knowing any HTML.

How do I use HyperTextArea on my site?

Excellent question!  Really getting to the heart of the matter here, aren't we.  There are two steps involved in using HyperTextArea on one of your page:

1) Install HyperTextArea on your site

The installation is simple:
  1. Download the HyperTextArea archive file from SourceForge
  2. Decompress the HyperTextArea archive using StuffIt Expander, WinZip, or any other compression utility
  3. Upload the files to a directory on your web site

2) Implementing a HyperTextArea on your Page

  1. On the page that you want to insert a HyperTextArea, add the following javascript:
  2. <script language="javascript" src="/javascript/HyperTextArea.js">
  3. Create a  HyperTextArea instance using the following code:
    <script language="JavaScript" type="text/javascript">
    area = new HyperTextArea("area1", 'here&#39;s the initial "<em>preloaded</em> <b>content</b>"', 520, 200,"/javascript");
  4. Load your page and laugh heartily as you now have a WYSIWYG editor!

What if I want my stylesheet to be used in my HyperTextArea

Simply add a sixth argument to the constructor function outlined above where the sixth argument is the url of the stylesheet.

Can I see an example of HyperTextArea in Action?

Certainly! One is available in the "demo.html" file in every HyperTextArea installation. You can see ours here.

Do I need to buy HyperTextArea?

Nope.  It's open source and can be used free of charge.  See the license on the about page at /javascript/about.html for details.

Why did you create HyperTextArea?

Mostly because I wasn't satisfied with the solutions that were available.  I wanted a WYSIWYG editor that would:
Why was I looking for such a beast?  I had done a web site for my mother's business and did NOT want to teach her HTML 8-)

How Can I Access a HyperTextArea Programatically Via Javascript?

The HyperTextArea class (or prototype in javascript parlance) includes a static getArea(areaName) method.  Thus, you can access your HyperTextArea named "area1" thusly:
myArea = HyperTextArea.getArea("area1");

How Can I Customize HyperTextArea?

Another great question!  HyperTextArea is customized by adding and/or subtracting controls.  The default implementation includes controls such as style and font menus, charachter formatting such as bold and italics, an image control, a link control, a table control, etc.  Once the HyperTextAre has been rendered it is too late to add or subtract controls, so before learning about controls, we must learn how to delay rendering.  By setting the 7th argument to true when instantiating a HyperTextArea, the area will not render until you explicitly tell it to
area = new HyperTextArea("area","Here is some content<br/>", 500, 300,"/javascript/","/styles/mystyle.css",true);
//perform customizations. See below for details.
To remove a control (such as the insertImage control), use the removeControl(controlName) method

myArea = new HyperTextArea("area","Here is some content<br/>", 500, 300,"/javascript/","/styles/mystyle.css",true);

To add a new control, you must first create a control object.  Control objects must implement the name property and the getRenderedText() method.  The name is the name of the control and must be unique relative to all other controls.  The  getRenderedText method must return the text used to render the control in the HyperTextArea toolbar.  This text must in turn implement the desired functionality such that clicking on the control will cause some function to be executed against the text in the HyperTextArea.  Once HyperTextArea addControl method will confer the "area" property onto the new control.  This area property refers back to the HyperTextArea that owns it.  Here is an example of a custom control which adds a horizontal rule to the text in the HyperTextArea:

function HRControl(){
this.name = "insertHR";
this.getRenderedText = function(){
this.getRenderedText = function(){
text = '<td><div id="insertHR">'
text = text + '<img class="btnImage" src="'+this.area.resourcePath+'images/post_button_hr.gif" width="25" height="24" alt="Insert HR" title="Insert HR" onClick="HyperTextArea.getArea(\''+ this.area.name +'\').insertElement(doc.createElement("hr"));
text = text + '</div></td>';
return text;
myArea =
new HyperTextArea("area","Here is some content<br/>", 500, 300,"/javascript/","/styles/mystyle.css",true);
myArea.addControl(new HRControl());

In addition to adding and subtracting controls, you can replace an existing control with a new one via the replaceControl which takes the name of the control to replace and the new control:

myArea =
new HyperTextArea("area","Here is some content<br/>", 500, 300,"/javascript/","/styles/mystyle.css",true);
myArea.replaceControl("insertImage",new HRControl());

In addition to functional controls, you can also add Spacers (which provide a space between one control and the next) and Toolbars (which adds a new row for more controls).

myArea =
new HyperTextArea("area","Here is some content<br/>", 500, 300,"/javascript/","/styles/mystyle.css",true);
myArea.addControl(new Spacer("spacer1"));
myArea.addControl(new Toolbar("toolbar1"));
myArea.addControl(new HRControl);

How Can I Determine the Names of All of the Existing Controls?

You can inspect the controlNames array thusly:
area = HyperTextArea.getArea("area1");
text = "";
text = text + area.controlNames[i] + "\n";

where "area1" is the name of your HyperTextArea

What Browsers will HyperTextArea work with?

HyperTextArea works with all current Mozilla Variants including:
Mozilla based browsers are available for every major platform and many minor ones.  Additionally, HyperTextArea works with Internet Explorer for Windows.  Future versions of KHTML based browsers (such as Konquerer and Safari) will most likely be supported as well.

What HTML Tools Did You Use to Write this FAQ?

You guessed it.  This FAQ was written using HyperTextArea in Mozilla Firefox v0.8 for Mac OS X.  The HTML produced by HyperTextArea will be different based on the browser that you use, so your results may differ.