Small, standards compliant, Javascript WYSIWYG HTML control : Paul James

Small, standards compliant, Javascript WYSIWYG HTML control

The name says it all. This Javascript file can be added to any HTML page to turn textarea elements into a WYSIWYG editor.

Key features

Small: The Javascript file is only 13kb, with the addition of styles and images that whole control is only 20kb.
Standards compliant: The HTML generated is valid (X)HTML, the script uses easily re-configured regular expressions to massage the code generated by the browsers designMode into valid (X)HTML.
Configurable: The WYSIWYG toolbars and functions available are easily configurable through an array at the top of the script.
Easy installation: Just drop in the Javascript file and assign a class name to turn a textarea into a WYSIWYG control.

Compatibility

This script uses the Microsoft designMode DOM extension and is written in ECMAScript edition 3. It has been tested and works in Internet Explorer 5.5+ and Mozilla 1.3+ based browsers (including Firefox and Camino) but should also work in any browser that support designMode.

Usage

Adding the control to your HTML form is easy:

Include the Javascript file into your HTML.

<script type="text/javascript" src="wysiwyg.js"></script>

Include the stylesheet into your HTML (optional).

<link rel="stylesheet" type="text/css" href="wysiwyg.css" />

Give your textarea a class of "wysiwyg".

<textarea name="mytextarea" class="wysiwyg"></textarea>

Give your textarea another class of the name of the HTML file to use as the default HTML for the WYSIWYG control (optional).
```
<textarea name="mytextarea" class="wysiwyg wysiwyg.html"></textarea>
```

Configuration

The top of the JS file defines two arrays, wysiwyg_toolbarButtons and wysiwyg_elementMap, these can be overridden or changed to adjust the way the control works.

wysiwyg_toolbarButtons

This defines the buttons and toolbars to be added to the control, and the actions to perform. The actions are the commands for execCommand, a full list of which can be found here.

wysiwyg_elementMap

This defines regular expressions to run on the HTML generated by the browsers designMode to convert it into tidier (X)HTML.

WYSIWYG_BUTTONS_AS_FORM_ELEMENTS

This constant should be set to true if you want the toolbar buttons to be generated as input button elements rather than standard inline HTML elements.

Download

wysiwyg-0.2.tar.gz (12kb)

Demo

You can see the WYSIWYG control in action.