NetWedit example

This page provides a simple demonstration of NetWedit, the JavaScript WYSIWYG editor, and an explanation of how it works.

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 a [Mark up] button to open a Markup window, which shows how your text will appear in a browser. You can format the text by selecting regions in the Markup window and clicking on the buttons underneath the text box. Changes will be reflected immediately: you will see HTML code inserted automatically in the respective text box and clicking on the Markup window will update the resulting display. (The Text box shows the HTML Source view).

Please note that by default when you select a text for formatting, every occurrence of that text will be formatted. Line breaks are inserted before selected text.

Text



Explanation

If you look at the source code you will see at the top, between <HEAD> tags a reference to the include script that contains the NetWedit code:

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

The source is here.

The script can then be used by calling a function within forms, and specifying a few parameters, as in the following lines:

  <INPUT onclick="commence('form1','box')" type=button value="Markup 1"> 
  <INPUT type="hidden" name="backupbox">
  <INPUT type="hidden" name="prevbox" value="">

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 the [Markup1] button to start a call to the commence function inside the library file, netwedit0_2.js.

The functions require some parameters in order to pass data to and from the markup window and this form. First of all, two parameters are needed 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. Similarly, the prevbox field is used internally, this time to store information about the way carriage returns are handled.


NetWedit Home