The Editor

The Editor allows you to create and manage content while seeing an indication of what the end result will look like.

Off

What is the 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 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. Text pasted into your browser automatically takes on the formatting of the source text.

Tip: Pressing Ctrl+Shift+V pastes text without any formatting.

Where is the Editor used?

You'll use the Editor to edit:

  • The body content of Basic Content type pages
  • The body content of News stories
  • The content inside Text boxes

What can I do in the 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

Row 1

Row 2

The Editor toolbars explained

Editor features

Maximise

Maximises the editing panel to the full width of your full screen. This feature is useful 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 4

Heading 5
Heading 6

Normal


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. This is especially useful when you have copied text into a page from a different word processor, such as Word or Google Docs.


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 insert one, scroll down to where you want to link to, select some text - usually a header - and click the anchor button. Name your anchor.

If you are editing a Basic page and want the anchor to be used in the 'On this page' Component then it is essential that you select some text before you click the anchor button. You'll know you've done this correctly as the text will appear next to the anchor inside a dotted box.

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 or any upper case characters.

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 images and videos


Undergraduate or postgraduate taught 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 CMS Admin and signifies that the content can not be edited in-page.


News story

Insert a predefined teaser view link to either an internal or external news story. 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 in the source News link. Changes will affect all instances on your site.


Student or Staff profile

Use to insert a teaser or card to a Staff or Student profile.


Event

Insert a predefined teaser view link to an event. 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.


Component 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

Accordions can be used to contain large amounts of content but should be used sparingly and assessed on a case-by-case basis. Normally, using Anchor links and the 'On this page' feature is a more effective way for a user to navigate a long page. Think about what content will be left on the page afterwards – if there’s very little else, it's probably best to keep it on the page. Ideally, we shouldn't try and 'hide' content.

Avoid using for FAQs.

Clicking the accordion button will add an accordion template within the Editor. Add the title and content within the specified areas.

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.

Recommended use of quotes:

  • For pages with long quotes, eg Student profile/News story: a short, concise highlight can be pulled out and added using the block quote feature. Leave the original text where it is. Add the quote somewhere between the first paragraphs of the page and a few paragraphs before it appears in the main body
  • For pages with a short quote, eg Basic page about career options (more for marketing purposes): the quote itself can be added using the block quote feature. Replaces the original text.

Example quote:

Quote text...

Quote name...

Quote attribution...


Shaded box

Gives your content a shaded background and prove to be an effective way of breaking up / distinguishing content, but should be used sparingly. You can add other elements such as text, media and quotes within the box. However, you shouldn't add elements such as tables and accordions.

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