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.