JS-RichEdit

Introduction

Use the EDITOR class to create WYSIWYG-editable text fields. You can create as many fields as you want. When put into a form, the contents can be submitted, e.g. to be stored into a database. Look and size can be modified easily and separately for each text field. Besides text-formatting, you can also insert images, bullet points, tables, and bar graphs. Other languages are supported, too. Have a look at these examples:

This script was tested with the following operating systems and browsers:

Windows XP: Internet Explorer 8, Opera 9, Firefox 3

If you use another browser or operating system, this script may not work for you - sorry.

Generally, richtext editing should work on Windows with Internet Explorer 4+ and with browsers using the Mozilla 1.3+ engine, i.e. all browsers that support designMode.

Notes

The following browsers have been tested and do NOT support richtext editing: NN 7.0 and Opera 7.0 on Windows, IE 5.2 and Safari 1.0 on Mac OS. However, the script works with them, too - a simple textarea will replace the richtext editor.

If you use a DOCTYPE header in your HTML page, the look of the richtext editor might slightly differ. The richtext editor looks best without DOCTYPE header.

Usage

First include the script into your HTML body (not head!), preferably directly after the BODY tag:

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

Then create a new instance of the EDITOR class where you want the text field to appear. This would usually be inside a form:

var editor = new EDITOR();

You may wish to modify some settings:

editor.textHeight = 250;
editor.setFocus = true;
editor.fieldName = "htmlText";
...

Finally, create the text field:

editor.create();

If you want to create a text field with preloaded content, use this syntax instead:

editor.create(your_content);

Please note that your content may not include any CR or NL characters, or else you will get a JavaScript error. As already mentioned, you can create as many text fields as you want.

The contents of each text field can be accessed for instance with PHP after the form has been submitted. The text fields are named richEdit0, richEdit1, richEdit2, etc. You can change the field name richEdit either in the configuration section, or when creating a new instance of the richtext editor (see examples above). If you want to submit the contents of your text fields, you have to call the function rtoStore() first, for example by using a submit button like this:

<input type="submit" value="Submit" onClick="rtoStore()">

Or use a form like this:

<form action="..." onSubmit="rtoStore()">

You should also have a look at the source code of this page and the included example.php file. ;-)