RTWedit (JavaScript WYSIWYG HTML editor): example

This page provides a simple demonstration of RTWedit, a JavaScript rich text editor for browsers that support inline editing in Web forms. At present, this tool works in IE5+ on Windows, and browsers based on Gecko (Mozilla rendering engine) 1.3+, e.g Mozilla 1.3+, Netscape 7.1+ and Galeon 1.3+. If you have an earlier version of Netscape and are unable to upgrade, then you need to use NetWedit, which actually has the same means of plugging in, but only allows markup.

Below there are two Text boxes where you can start typing in the your text. Alternatively you can copy and paste into the boxes. When you've entered the text, click on an [Edit] button to open an Preview window, which shows how your text will appear in a browser. You can format the text by selecting regions in the edit window and clicking on the buttons underneath the text box. You can also add and delete text.

Changes will be reflected immediately: you will see HTML code inserted automatically in the respective text box and clicking on the edit window will update the resulting display. (The Text box shows the HTML Source view).

First Text Box

<h1>Welcome</h1> Some markup: <b>bold</b> of text that you may <strong>strongly</strong> wish to edit. Here is <u>underlined</u> Note that it is formatted using an external style sheet. You can type <em>multiple</em> paragraphs, and make as many changes as you like, just as you would in a Word processor.

Second Text Box

<h1>Welcome</h1> <p>This is a second text area box to try. This one already contains HTML markup and has been configured to open up a smaller window and set only three formatting buttons.</p> <p>Like the first, it contains more than one paragraph.</p>

Explanation

This page contains a single form with two text area fields. Each field has associated with it a pop-up window which is created when a user clicks on an [Edit] button to invoke a function inside a JavaScript library file, rtwedit.js. If you look at the source code you will see at the top, between <head> tags a reference to this included script that contains the RTWedit code:

  <script language="JavaScript1.2" src="rtwedit.js">
  </script>

Click here for the source code.

Then if you look inside the <form> tags you will see calls to a function preview() from within each text area, along with a few parameters. The first text area above has the most basic configuration that is required:

  <input onclick="preview('form1','box')" type="button" value="Edit 1"> 
  <input type="hidden" name="backupbox">
  <input type="hidden" name="prevbox" value="">

The functions require some parameters in order to pass data to and from the edit window and this form. First of all, two parameters are needed in the preview() function to distinguish the particular form and the particular field - form1 and box respectively. The hidden field named backupbox is used for the undo() function and stores a copy of the contents of the text area box before a format button is pressed. It needs to be named: backup<field_name>. Similarly, the prevbox field is used internally, this time to store information about the way carriage returns are handled.

The second text area has some configuration options that opens up a smaller window and sets up fewer buttons:

  <input onclick="preview('form1','cube',350,250)" type=button value="Edit 2"> 
  <input type="hidden" name="backupcube">
  <input type="hidden" name="prevcube" value="">
  <input type="hidden" name="csscube" value="http://www.oucs.ox.ac.uk/acdt/mainacdt.css">
  <input type="hidden" name="optionscube" value="bold,italic,insertorderedlist";
  <input type="hidden" name="labeloptionscube" value=" B , I , 1.. 2.. ">
  <input type="hidden" name="parastylescube" value="off">

In this case, the textarea is distinguished by the form name form1 and text area name cube respectively. There are two further parameters - numbers that specify the height and width of the popup window. There are four new optional hidden fields: csscube points to a style sheet for the popup, though in this case it doesn't have much effect; optionscube lists a number of markup actions that are to be made available, whilst labeloptionscube provides the labels to correspond to these actions. The items must be named according to the designMode support as provided:

for IE consult MSDN site: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp
and for Mozilla consult http://www.mozilla.org/editor/midas-spec.html .

Finally, parastylescube determines what paragraph and heading options are available. In this case, the value is set to "off", which means this menu is omitted. Alternatively, you can define a comma-separated list of numbers, e.g.

  <input type="hidden" name="parastylescube" value="3,4">

would define a pulldown list with normal paragraph styles plus headings 3 and 4.

There is also a more elaborate example illustrating varying kinds of support for multiple forms.

Paul Trafford
Last modified: 29 September 2009

RTWedit...

Home : Development : RTWedit : Example

Explanation