Help - WYSIWYG Editing

The What You See Is What You Get (WYSIWYG) editor (whose actual name is ckEditor) shows a field's content (text and graphics) onscreen during editing in a form closely corresponding to the appearance it will have when it is shown as a web page. The editing is performed using a set of little editing buttons along the top of the box being edited. The meaning of these icons is fairly self-evident but can, if so wished, be discovered by hovering the cursor over them so as to reveal their "hints". (Here is some tutorial material on this editing facility.) 

Of particular note is the Table icon. This enables you to create simple tables. Once a table has been created, if you position the cursor at the right hand edge of the table you can adjust the width of the table. Similarly you can position it on a column boundary to adjust the position of this boundary. If you position the cursor inside the table and do a right-click a small window opens up that provides you with a hierchical menu providing a rich set of facilities e.g. for inserting or deleting cells, rows or columns, and for configuring cell size, type, colour, and content alignment.

There are also icons for "Find" (a little magnifying glass) and "Replace" ("^b_a"). These operate within a single field. When the "<>Source" icon (see below) is set to show formatted text (i.e. to allow rich text editing), these two icons are very similar to each other. Each when pressed opens up the same little window with two Tabs - "Find" and "Replace" - the Tab that has been selected simply depending on which icon was pressed. The Find Tab has a “Find what” box that allows one to match case, and/or match a whole word, and to determine whether to search cyclically for the desired item. The Replace Tab has a similar “Find What” box, plus a second box for the replacement text, and allows one to specify Replace or Replace All. (Thus the facilities provided by the Replace icon and Tab are an extension of those provided by the Find icon and Tab.)

The WYSIWYG editor shows a field's content in a box whose size matches that needed to show the entire content.  If you are editing a large text box (i.e. larger than a single screen, as often happens in Plain nodes), it is suggested that you first press the WYSIWYG "maximise" button (the icon with the 4 arrows pointing to its 4 corners). This has the effect of keeping all the WYSIWYG editor buttons at the top of the screen while you can scroll up and down the box's content, and perform any required editing. Pressing the maximise button again will return you to the full Edit Template - something you will need to do in order to press "Save" in order to preserve the results of your editing actions.

The WYSIWYG editor's "<>Source" icon provides another (and in fact better) way of switching between seeing the content of the field as rich text, i.e. as it will appear as a web page, and as structured HTML. The WYSIWYG editor's scheme has an advantage over the switching scheme that involves the links "Enable rich text" and "Disable rich text" below the field, namely that while HTML text is being shown you can continue to use a maximised screen with the icon bar at the top, (though almost all the icons except the "<>Source" icon will be greyed out).

Find and Replace are still available when the “<>Source” icon is set to show HTML, but involve temporarily overwriting the top line of the HTML text with a "command line", and using the "Return" key to cause the command to be executed. The "Find" icon allows any sequence of characters to be specified - the first occurrence of these characters will be highlighted when Return is pressed. The "Replace" icon provides a Replace command line that includes a changeable specification of the last text to be selected (e.g. by use of "Find"). Then when Return is pressed a "With" command line takes the place of the Replace command line, and provides an opportunity to specify the replacement text. When Return is pressed again the command line is replaced by one that states "Replace?" and provides four little button"Yes", "No", "All" and "Stop" which can be used to indicate what is to be done. (This line will disappear, revealing the first line of the HTML text again, when one of these buttons, or indeed anything else, is clicked.) So once again, even when operating at the HTML level, the facilities provided by the Replace icon are an extension of those provided by the Find icon.

The WYSIWYG editor incorporates SCAYT (Spell Check as You Type), a facility that is invoked and controlled using the icon which contains "ABC" above a tick mark. (This icon is positioned just after the "Maximise" icon.) The SCAYT facility can be turned on ("enabled") using the menu that opens when you click on the icon. When SCAYT is enabled, there is a blue line under the icon, and any mis-spelled word will have a wavy red line under it. Right-clicking on such a word brings up a menu that proves some suggested alternative spellings and allows you to decide what should be done about the mis-spelling. Whether or not enabled SCAYT provides a "Check spelling" menu item that provides a means of spell-checking the entire current page, in a separate small window that is opened for the purpose. (This small window has three tabs, one for spell-checking, the others for a thesaurus and a gramar checker.) 

Note: The WYSIWYG editor re-arranges (in effect “standardises”) the format of each field’s HTML when first used on that field. It does this through the use of new lines and tab as formatting characters, and HTML formatting constructs such as “<p>&nbsp;</p>". This does not effect the field's visual appearance in the page, apart from its vertical spacing.  But it can cause searching problems with sets of pages which are a mixture of (i) such standardised HTML pages and (ii) original (perhaps rather idiosyncratic, or poorly structured) newly-imported or newly-created HTML pages. Such standardisation will be applied to all fields of text whose formats have been "enabled for rich-text editing”  by default. (Such enabling is done in the maintainer’s account page (user profile), by ticking the "Filtered html” and "Genuki topic” boxes in the Edit tab. If WYSIWYG is not set as a default, standardisation will be applied to a field’s HTML only when the enclosing page’s edit template is opened and the field's “enable rich text” command is used.) The searching problems (unexpected failure to find what is being sought) can occur if the chosen search term involves HTML text whose representation in standardised and un-standardised fields and pages might differ. However searches for single HTML “words”, i.e. strings of alphanumeric characters that do not contain spaces or new line characters, should not be affected. If and when all the pages being searched have previously been opened for WYSIWYG-enabled editing, this problem should not occur. 

See also note Caveats Regarding Use of the Drupal Editor.