How to use the WYSIWYG Editor

Introduction

When you are editing a GENUKI node you will see fields (eg Topics in Place nodes) where you can enter extended text. These text entry boxes are headed by a toolbar. This is the " What You See Is What You Get "(WYSIWYG) editor (called  ckEditor). It 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  many of these icons is fairly self-evident but hovering the cursor over them will show their "hints". 

Visual or Source

Drupal has been set up to provide a balance between displaying a consistent look and feel and being sufficiently flexible to deal with a wide variety of information, often with a need to reflect its original style. 

The ckEditor can be used in 2 ways:

• Visual editing: This is the default as it starts. You type text and use the buttons to change the appearance of the text in the same way as a normal word processor. Mostly the result will be close to the final form that will appear on the page when viewed. You are strongly encouraged to use this approach wherever possible.
• Source (raw html editing).: you can toggle this on (and off to return to visual editing) by clicking the "source" button in the toolbar. You can then enter any text including HTML code. You are strongly discouraged from doing so unless it is impossible to achieve a satisfactory result in any other way. This avoids the look and feel becoming inconsistent. In addition there are technical reasons why what you enter as HTML code may not be saved exactly by the editor in Drupal. 

Paragraphs and Headings

Some of the look and feel of GENUKI has been implemented by adding specific GENUKI styles to be applied to various page elements. These are shown with examples on this page.

Links

To enter a link select the text to which the link is to be added then click on the link button in the toolbar. You will get a pop up where you can type in the url or  paste it into the box.

Several html attributes can be attached to a link. So far we have provided one option in the link pop up. You can enter text in the Title field  that will appear in a pop-up if you hold the mouse over the link. If you wish to add other attributes you may be able to do that in the "source" view.

If you wish to create an email address as a link simply enter the basic address  into the box, it will automatically add a mailto: on the front so you don't have to edit the source for that.

There is an easy way to add links to other urls within Genuki itself so you don't have to search for the url. You can type in part of the title of the node you want to link to in the usual url box. So if you type 'Lytham' there it pops up a menu of all the titles containing that. Select the one you want and it pops the url into the href= field. It can hold up to 100 items in the menu. They are grouped by node type and only to show Place, Plain and Church nodes. 

You may have more than one node with similar titles. To make it easier to distinguish between them there is a line under the title in the menu containing the node type, county and parent of the node. That helps considerably.

Tables

This enables you to create simple tables. Once a table has been created,  ADD

Media

Find and Replace

There are also icons for "Find" (a little magnifying glass). This operates within the single text field immediately below the toolbar and only in the visual editor (not when the "source" is displayed.

Spell Checking 

The WYSIWYG editor incorporates SCAYT (Spell Check as You Type). This is enabled by defaul 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. 

Using Full Screen

The WYSIWYG editor shows a field's content in a box that may 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 . 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.

Interaction with HTML

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.  

See also note Caveats Regarding Use of the Drupal Editor.