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).
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:
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.
Last modified: 29 September 2009