WYSIWYG editor

WYSIWYG (pronounced "wiz-ee-wig") stands for 'What You See Is What You Get'. This component allows you to create and manage content while seeing an indication of what the end result will look like.

What is the WYSIWYG editor?

It's the place where you edit most of the written content in the CMS. It does what it says on the tin - what you see in the editor is close to what you will get on your finished page. 

Most common editing tasks can be done within the WYSIWYG editor. You can also use the CTRL+C and CTRL+V shortcuts to copy and paste text into the editor from Google or Microsoft documents.

Where is the WYSIWYG editor used?

You'll use the WYSIWYG to edit:

  • The body content of Basic pages
  • The body content of News stories
  • The content inside Text box paragraphs

What can I do in the WYSIWYG editor?

You can do lots of things, such as formatting text and adding a quote or a table.

All of the features of the editor can be found in the toolbox above it. If you hover your mouse over the buttons you will be able to see what each one does. As additional functionality is added to the CMS the toolbar options may change.

Editor features

erererer

Editor features

Maximise:

Maximises the editing panel to the full width of your full screen. This feature is great when you're working on a large document and the toolbar gets pushed up out of view.


Paragraph Format

Allows you to format the text using the default size ("normal"). You can also apply heading styles H2 (second most important heading) through to H6 (least most important heading). H1 is automatically applied to the page title only.

Paragraph examples:

Heading 2

Heading 3

Heading 6

Bold

Adds extra weight to your text to highlight important information. This should only be used on regular text and not headings. Avoid overuse.


Italics

Italicises your text. This should only be used on regular text and not headings. Check the style guide for italics


Insert special character:

Provides you with a selection of special characters including trademark ™ and copyright © symbols.


Superscript and Subscript:.

Used for formulas (CO2), mathematical expressions (x2) but not for dates.


Remove format:

Removes all formatting from the selected text to return it back to the default weight and size.


Link / Unlink:

Use these buttons to add a link from any text. Read more about inserting links using this editor.


Anchor:

An anchor allows you to provide a link to content on the same page. To do so, select where you want the page to scroll to and click the anchor button. Name your anchor. To provide a clickable link to this anchor, select some text and click the link button. In the URL field type # followed by the name of your anchor. Do not include spaces.

Example anchor:

This will go to Media


Insert / remove numbered or bulleted list:

Select your text and click the button for your desired type of list. Highlighting and clicking again will remove the list formatting.

Example lists:

  • Option A
    • Sub-option
  • Option B
  • Option C
  1. Step 1
  2. Step 2
  3. Step 3

Increase indent / decrease indent

Select your text and click the button to increase or decrease the indent of your new list item(s). To keep your content laid out neatly, do not indent lists by more than three levels.

Example increased indent list:

  • Level 1 indent
    • Level 2 indent
      • Level 3 indent
    • Level 2 indent
  • Level 1 indent

Media:

Insert a piece of media from the media library. Image containers span the full width of the page even if the contained image isn't. Media containers can be dragged around the page to position them wherever you want.

Example media:

To learn more about how this feature works, read our guide about inserting texts and images


Smart Card (PGT course):

Use the node feature to insert smart cards. Once embedded a grey bordered box will surround item. The box is only visible in the Admin and signifies that the content can not be edited in-page.


Smart paragraph (from library):

Use this to add predefined content into your page. Once embedded a grey bordered box will surround item. The box is only visible in the Admin and signifies that the content can not be edited in-page. If you need to edit it you'll have to do so at source in the Paragraph library. Changes will affect all instances on your site and central content.


Insert horizontal line:

Inserts a full width line across your page. Use this to break up larger pieces of unconnected content.

An example horizontal line is right underneath this sentence!


Insert accordion:

Clicking the accordion button will add an accordion template within the editor. Add the title and content within the specified areas. Use sparingly and avoid using for FAQs.

Example accordion:

Accordion title 1

Accordion content 1.

Accordion title 2

Accordion content 2.


Block quote:

Block quotes are great for breaking up a large body of text. Add the quote text, name and attribution to the provided fields.

Example quote:

Quote text...

Quote name...

Quote attribution...


Shaded box:

Gives your content a shaded background. You can add other elements such as text, media and quotes within the box.

Example shaded box:

Type, paste or drag and drop text here...


Table:

A full width responsive table with alternate white and grey striping.

Example table:

Item header Data header 1 Data header 2
Item Data Data
Item Data Data
Item Data Data

Undo, Redo, Cut, Copy, Paste:

These functions work just as they would in a word processor document like Microsoft Word or Google Docs.


Tip

Why not have a play around with the WYSIWYG editor using your training account? This way you can get a feel for what is possible and what looks best.


Next step

Inserting links

Get in touch

If you have CMS questions or are stuck then get in touch and we'll do our best to help.

Contact us