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:

Download the HyperTextArea archive file from SourceForge
Decompress the HyperTextArea archive using StuffIt Expander, WinZip, or any other compression utility
Upload the files to a directory on your web site
- For the remainder of this FAQ we will assume that you uploaded the files to a directory named "/javascript". If you used a different directory then substitute your directory name for "/javascript" whenever it is used in this FAQ.
- This directory must be accessible via a web browser such that making a request to http://www.yoursite.com/javascript/about.html will give you a page about the HyperTextArea product. If you get a 404 error (not found) then make sure that your files are where you think they are.

2) Implementing a HyperTextArea on your Page

On the page that you want to insert a HyperTextArea, add the following javascript:

<script language="javascript" src="/javascript/HyperTextArea.js">

</script>

Create a HyperTextArea instance using the following code:
```
<script language="JavaScript" type="text/javascript">

`

</script>
```
- This code must be inside <form></form> tags. Often you can just replace a <textarea name="myField"></textarea> with the code above. Make sure that the name of the <textarea/> is the same as the name that you give to your HyperTextArea.
- The first argument ("area1" above) is the name of the HyperTextArea instance. More on that later.
- The second argument is the HTML content that you would like to load up in the HyperTextArea when it initializes.
- The third and fourth arguments are the height and width respectively
- The fifth argument is the path to the installation directory ("/javascript ") in this example, although you can install HyperTextArea in any directory on your web site that is accessible via a web browser.
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:

Work on any platform
Work on the widest possible selection of browsers
Be simple to implement on any page
Provide a simple mechanism to add or remove buttons and other functionality
Be free (at least as in beer if not as in software)

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.

area.render();

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);

myArea.removeControl("insertImage")

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);

myArea.render();

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

You can inspect the controlNames array thusly:

area = HyperTextArea.getArea("area1");

text = "";

for(i=0;i<area.controlNames.length;i++){

 text = text + area.controlNames[i] + "\n";

}

alert(text);

where "area1" is the name of your HyperTextArea

What Browsers will HyperTextArea work with?

HyperTextArea works with all current Mozilla Variants including:

Mozilla
Netscape
Firefox

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.