RTWedit (JavaScript WYSIWYG HTML editor): example of easy widget

The simplest way to install RTWedit is as follows:

Copy rtwedit.js to a directory that can be referenced from the Web page, mypage.htm, say, where you wish to use the editing widget.
In mypage.htm load rtwedit.js as an external JavaScript source, by referring to it from somewhere in the <head> tags as follows:
```
  <script language="JavaScript1.2" src="rtwedit.js">
  </script>
```
In the <body> tag, add a call to the function addHtmlEditor()

Demonstration

Below is a demonstration with a couple of Textarea 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.

This form contains two textarea boxes.

Box 1

This is a sample of text that you may wish to edit. Note that it is formatted using an external style sheet. You can type multiple paragraphs, and make as many changes as you like, just as you would in a Word processor.

Changes are reflected immediately: you should see HTML code inserted automatically in the respective textarea box, which shows the HTML source view; conversely editing in the textarea box and clicking on the [Edit] button will update the resulting WYSIWYG display.

Box 2

<h2>Welcome</h2> <p>This is a second text area box to try. This one already contains <strong>HTML markup</strong>.</p> <p>Like the first, it contains more than one paragraph.</p>

Explanation

This page contains a single form with two named text area fields, each field having 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.

Underneath you will see in the <body> tag, a call to the function addHtmlEditor() which dynamically inserts some HTML underneath the <textarea> tags in the web forms to generate the [Edit] buttons. You can't see HTML when using 'View Source', but it looks something like:

  <input onclick="preview('widget1','box')" type=button value="Edit"> 
  <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.

When the page loads, the script looks at each textarea box and wherever it finds the containing form without a name it will define one (numbered in sequence widget1, widget2, etc..). It applies the same options per text box, but you can modify these options in the same way as for the full featured configuration without the dynamic load. Note that it will always add an editing button for each textarea box. Optionally you can define your own label instead of 'Edit' - just put this as a string parameter in the call, e.g. addHtmlEditor('Format') will label each button as 'Format.'

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 .

Paul Trafford
Last modified: 29 September 2009

RTWedit...

Home : Development : RTWedit : Example: easy install

Demonstration

Explanation