RTWedit (JavaScript WYSIWYG HTML editor): example

This page provides a more involved demonstration of RTWedit, to illustrate the various options in terms of passing forms as parameters to the popup widget. You can return to the standard example. Please note that this demo is for pages conforming to XHTML1.0 Strict (where forms cannot have the 'name' attribute).

Below there are three forms, each with two text boxes where you can start typing in the your text. 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. Edit as normal.

Form 1

The first form has no form name and sends the parameters: this.form, ...

The first textarea has label 'box' and sends the parameters: this.form,'box'

Text Area 1.1

<h1> Welcome </h1> <p>Some <strong>markup of text that you may strongly</strong> wish to edit. Here some text 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.

The second textarea sends the parameters: this.form,'cube',350,250

Text Area 1.2

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

Form 2

The second form, as above, has no form name and sends the parameters: this.form, ...

The first textarea in the second form has label 'box' and sends the parameters: this.form,'box'

Text Area 2.1

<h1> Welcome -form2 </h1> <p>Some <strong>markup that you may 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.</p>

The second form, second textarea sends the parameters: this.form,'rectangle',450,350

Text Area 2.2

<h1> Welcome - form 2 </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>

Form 3

The third form again has no form name and sends the parameters: this.form, ...

The first textarea in the third form has label 'box' and sends the parameters: this.form,'box'

Text Area 3.1

This is a sample paragraph that you may wish to edit. You can type multiple paragraphs, and make as many changes as you like, just as you would in a Word processor.

The second textarea in the third form has label 'cube' and sends the parameters: 'form3','cube',350,250

Text Area 3.2

This is a second text area box to try. This one has been configured to open up a smaller window and set only three formatting buttons. Like the first, it contains more than one paragraph.

Explanation

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.

For Form 1, the first text area above has the most basic configuration that is required:

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

Note that in this case the form object is passed, but as a variation, in Form 3, a form label is passed:

  <input onclick="preview(this.form,'box')" type=button value="Edit 1">

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 - a form object or reference (this.form or '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(this.form,'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://users.ox.ac.uk/~pault/default.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.

Paul Trafford
Last modified: 29 September 2009

RTWedit...

Home : Development : RTWedit : Lengthy example

Form 1

Form 2

Form 3

Explanation