Hide

How to use the WYSIWYG Editor

hide
Hide

          Help and Guidance 2021: Modified Page: Version 1.1

 
Hide

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". 

This page concentrates on some features that are tailored in GENUKI

 

GENUKI Style


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. This is explained [LINK]. Source is most useful in conjunction with various search and replace functions as you need to know the precise text including codes that you wish to change. [LINk]

Drop Down Menus

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.

 

Tables


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.

Find and Replace


To be reviewed 

There are also icons for "Find" (a little magnifying glass) and "Replace" ("ba"). These operate within the single text field immediately below the toolbar.. 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.)

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 icons .

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. 

Templates


This icon offers you the chance to insert standard snippets of text into a field. Some of them are designed automatically to include information such as another link or a page name. There is a separate note about the current templates available and their purpose. Most have been designed for specific purposes for individual maintainers. If you think one would be useful to enter highly repetitive material contact the Exec Team.

Embedding other material in pages


There are two icons at the end of the ckEditor strip and B.     Being checked

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 (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.

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.  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