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

Stricter Constraints on HTML included in nodes

Successive updates  of Drupal and the CK5Editor have adopted an increasingly strict approach to the attributes that can be included in HTML tags in the text entered into the WYSIWYG editor - CK5 Editor. 

Some recent changes removed the "anchor" (the id attribute) from some headings or made the heading invisible while retaining the ir so that the anchor operated. A number of similar problems were found with attributes being removed. Updates have been made to prevent that happening but this depends on when a node has been edited. 

1. New nodes can be set up so that some intended settings are retained. But there may be some limitation on what can be achieved compared with the unconstrained approach in the past . The guidance notes are being updated to show exacly what works and how to achieve certain outcomes.

2. Nodes that have not been changed since early 2023 should retain all the html as in the last revision before that time. They  will therefore render as expected. Ideally the best approach is to leave these alone if possible!
3. Nodes that have been saved/edited more recently may have lost some of the html in these cases. You can edit them now to reinsert any missing html (provided it is within the current limitations). If it is more convenient you can compare the curret revision with a much earlier version. It may be better to revert to an earlier revision to reinstate the missing html and make other manual revisions to the page.

As well as improving the behaviour of CK5Editor in some cases a small number of additional "Styles" have been added to help manage problems that might occur with tables, including the width of columns.

The relevant help pages are being revised to explain how best to use the editor and what you can expect. 

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. In most cases settings applied using the buttons in Visual Editor are more likely to be retained as vaild html. 
• 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. It is highly likely that HTML code entered  in source may not be saved exactly by the editor in Drupal. You will note that some html entries are removed when you switch back from source to the visual editor.

 The main use of the source view is to check for text or html code that is producing mistakes in the presentation of a page.

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

UPDATE TO BE MADE

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.  

'Features' of ckeditor 5

• There are a small number of html parameters that we have not been able to configure the editor to allow to be used. The use of class= in 

  <blockquote> <code> <em> <hr> <img> <li> <ol> <table> <thead> <tbody> <tfoot> <tr> <th> <td> <uL>

  An exception seems to be that you can specify class names defined in which can be added via the Styles plugin.

• <b> gets changed to <strong>
• <i> gets changed to <em>
• If you define an <a> without an href= , for example with just an id=, with text before the </a> then all the <a> tag gets removed by the editor.

See also note Caveats Regarding Use of the Drupal Editor.