Help? with using the wysiwyg editor

Some background info

Why use the wysiwyg editor to make updates?

Parts of your site can be defined by us as editable using a simple plain text data entry area (i.e. with none of the formatting icons/options the wysiwyg editor offers). This works well in some cases and reduces the chances of formatting errors occurring via the wysiwyg editor. BUT, the wysiwyg editor is necessary for larger areas of editable content which may include hyperlinks, images and different heading styles for example.

How things can go wrong ...

The style and layout of your site is controlled by a stylesheet (CSS: Cascading Style Sheet). Without the CSS your site would appear as plain text, headings and links in default styles and images. Below is a screenshot of part of this page showing how it would look without its stylesheet. You can see the image from the banner, a list of hyperlinks and an unstyled heading - not very beautiful ...

no CSS

The heading on this page is 'marked up' in HTML with an <h2> tag:

<h2>Help? with using the wysiwyg editor</h2>

The <h2> tag is targeted with style rules in the CSS which change the font, size and colour to this:

Help? with using the wysiwyg editor

If you were to update it in the wysiwyg editor and change it to, say, an <h3> level heading, the style would change either to another style defined in the CSS for h3 headings or to the default style for h3!

In conclusion: we want your website to continue looking as good as the day is was launched - proceed with caution using the wysiwyg editor!

Beware copy/paste & white space!

The wysiwyg editor in a CMS has a hard job to do ... it has to generate HTML from input keyed in by you. Things can go wrong ... two of the most common problems are copying and pasting from word processing software like Word and generating empty HTML tags and hence creating areas of white space on the web page.

Copy and paste

The wysiwyg is likely to pick up unwanted formatting when copying and pasting directly from software like Word. This formatting will override the styles defined in the CSS stylesheet for your website and the site will soon end up look like a jumble sale! Please copy and paste content from the original document into a plain text editor (e.g. NotePad) and then copy and paste from there into the CMS editable regions.

PC Users: Notepad is installed with Windows and you should find it by clicking on Start > programs > accessories.

MAC Users: If you use a Mac you need to use the equivalent plain text editor.

PLEASE NOTE: TextEdit does both rich and plain text, so it is not the direct equivalent of Windows' Notepad. It defaults to rich text, so you will either need to set it to default to plain text in the preferences or do it manually each time. Rich Text will preserve the formatting rules that you are trying to get rid of!

Here is a link to the Apple support site: How to set up TextEdit as a plain text editor.

Try using the 'paste as plain text' icon

An alternative tactic is to copy the content you wish to use on your website and then click on the icon shown in the image below - the 'paste as plain text' icon. A pop up box will appear for you to paste your text in - and all being well this process should 'sanitize' the copied content of all extra style tags.

paste as plain text icon
White space

Please also remember that hitting line return/new line in the CMS editable areas generates white space on the website. Unless you intend to create space ensure that any unwanted line-breaks are deleted from the editable areas (hit the 'Delete' key or the backspace/delete key).

Introducing the wysiwyg : CKEditor

CKEditor

The wysiwyg editor used with Couch CMS is CKEditor. The CKEditor website has an extensive User Guide which you may wish to refer to. However since much of the content within the User Guide will not apply to the simple updates you will be making to your website, we will refer you to the pertinent sections in our tutorial.

What do all those icons mean?

The wysiwyg editor can be customised by us to show more or less icons, usually the setting used is 'medium' - which results in the following toolbar:

wysiwyg toolbar

Click on the 'maximise' icon to expand the editor to fill your screen, which you may find easier to work with. Click the maximise icon again to return to the original size.

Copy & paste • special characters Ò Ö Ø •

Copying and Pasting

One of the most common actions you will be taking is copying and pasting content into the wysiwyg editor, from a Word document, an email etc. The CKEditor website has a section on copying and pasting in their User Guide. Here you will be shown how to use keyboard shortcuts to copy/cut/paste (something you may already do).

In brief here:

Copy: Ctrl/c • Cut: Ctrl/x • Paste: Ctrl/v

Special Characters

You will need to insert characters that are not part of the standard keyboard e.g. accented letters (é), mathematical expressions, other symbols (© • €).

To insert a special character into your page, press the Insert Special Character button special char on the toolbar. The Select Special Character dialog window that will open allows you to choose a symbol from a set containing Latin letters, numbers (including fractions), currency symbols, punctuation, arrows, and mathematical operators.

special characters

Find the character that you need and select it with your mouse or the Tab key. The dialog window will close automatically and the special character will appear in the CKEditor editing area in the position of the cursor.

REMEMBER ... finished updating ...

Having made your changes ... VERY IMPORTANT ... scroll to the bottom of the screen and click SAVE!

save your changes
Don't want to make final changes to your site ...

Go to Couch basics for information on working with Drafts and Previews.

Inserting a line break

Inserting a line break (ie your content appears on the next line rather than new paragraph)

Sometimes you will want to split a heading or sentence over two lines without creating a new paragraph. That is you don't want to create an empty line!

This is a sentence that I want to
split over two lines.

I didn't want it to be split

into two paragraphs - like this!

When editing/creating site content in the wysiwyg editor in the Admin Panel - if you press the RETURN key on your keyboard it will generate a new paragraph.

If you want to generate a line break without the extra vertical whitespace of a new paragraph - hold down the SHIFT key and then press the RETURN key.

Identify/select format of content in rich text editable region

Identify current format of content
Format rich text content
  1. Click on the text you wish to know the format of - in this example 'Next Concert'.
  2. The 'format' icon in the toolbar will now display the format of this content - in this example it is 'Heading 1'.
  3. The 'format' is also displayed in the footer area of the wysiwyg window - in this example it is 'h1' (i.e. Heading 1).
Choose the format of content
Select rich text content

When you key in content within a rich text editable region using the wysiwyg editor the format will usually default to 'Normal' (as shown in the toolbar), the format in the footer area will be 'p' (i.e. paragraph). If you wish to change the format of the content:

  1. Highlight the text you wish to reformat - in this example 'J S Bach'.
  2. Click on the arrow to reveal a dropdown list of formats.
  3. Select the format you wish to apply (the style of the format you select is determined by the CSS stylesheet - written by us at A Plain Fish).

Updating tabular data

Insert a row into a table
insert row into table

Follow steps 1-3 as shown above, then click within the new table row and add your text in the first column, tab across to the second column and do likewise.

Delete a row from a table

The principle for deleting a row(s) from a table is the same as above. Highlight the rows to be deleted first and then follow steps 1 and 2 - click 'Delete Rows'.

REMEMBER ... finished updating ...

Having made your changes ... VERY IMPORTANT ... scroll to the bottom of the screen and click SAVE!

save your changes

Inserting a hyperlink

Insert a hyperlink

To insert a link, press the Link button link on the toolbar or use the Ctrl+L keyboard shortcut. If you want the link to be assigned to a text fragment like this, select that text first. If no text is selected, the link URL will appear in the page e.g. www.aplainfish.co.uk.

Having clicked on the link button a link dialog window will open.

The Link Info tab settings
URL link info
  1. Link Type: URL is the default link type that lets you add a website address to your page.
  2. Protocol : Leave as default value 'http://' unless you wish to change it to 'https://'
  3. URL : enter the full URL of the site you wish to link to (e.g. www.aplainfish.co.uk). If you are linking to another page on your own website - visit that page, copy and paste the URL here.
The Target tab settings
URL link target

No selection required since the default action will be to open the link in the current window (i.e. the same as selecting 'Same Window (_self)'). If you wish the link to open in a new tab or window - not recommended these days - select 'New Window (_blank)'.

The Advanced tab settings

You can ignore this tab.

Create the link ...

Click on the green OK button and then ...

REMEMBER ... finished updating ...

Having made your changes ... VERY IMPORTANT ... scroll to the bottom of the screen and click SAVE!

save your changes