Rich text editor formatting

Rich text editor formatting

You will require this information if you would like to better understand the formatting functions that are available to you in the rich text editor.

Instructions

  1. Navigate to the area of your website that you would like to use the rich text editor (ensure that you are logged in and have the appropriate editing rights)

  2. Navigate to the 'Edit' form of the content

  3. See below for the different formatting options:

Icon

Action

Description

Icon

Action

Description

Paste as plain text

Use this function if you are pasting text that you want to remove the formatting from, or if you are pasting plain looking text from word processing software, as it can come with hidden styles that may impact the look of the content on the page.

Text styling

There are eight options in the 'Style' menu:

  1. 'Normal paragraph' - this is regular paragraph text formatting.

  2. 'Heading - Main' - this is the largest heading option available to editors in the rich text editor. You should use this styling for the primary headings on the page.

  3. 'Heading - Sub' - this is the second largest heading option available to editors in the rich text editor. You should use this styling for the secondary headings on the page.

  4. 'Quote - Block' - this quote styling option will centre the quote on the page, and span the available width of the text area.

  5. 'Quote - Pull' - this quote styling option will pull the quote to the left side of the page. it will use a proportion of the text area, and the other paragraph text on the page will wrap around the quote.

  6. 'Summary text' - this styling is for the summary or introduction to some content. You should use this styling when introducing content, at the top of the rich text field. This summary text formatting is hardcoded where you have the 'Summary' or 'Description' field. The use of this 'Summary' styling should be carefully thought through and is a good option for providing summary text on cover pages.

  7. '(remove style)' - this option will remove any styling that you wish to from any text that you have highlighted.

  8. 'Highlight' - this option will apply a theme coloured highlight block to the text that you have selected when you apply this styling.

Bold

This formatting will make the text that you apply it to Bold

Italics

This formatting will make the text that you apply it to Italicised

Underline

This formatting will make the text that you apply it to Underlined

Sub-script

This formatting will make the text that you apply it to smaller and aligned slightly lower than the regular paragraph text

Super-script

This formatting will make the text that you apply it to smaller and aligned slightly higher than the regular paragraph text

Left align

This formatting will make the text that you apply it to align to the left side of the text area

Centred

This formatting will make the text that you apply it to align to the centre of the text area

Right align

This formatting will make the text that you apply it to align to the right side of the text area

Justified

This formatting will make the text that you apply it to align to the full width of the text area

Bullet list

This formatting will provide a styled list of bullet points

Number list

This formatting will provide a styled, numbered list

Reduce indent

This formatting option will reduce the indent of the content that it is applied to

Increase Indent

This formatting option will increase the indent of the content that it is applied to

Insert image

This option will allow you to insert an image into the rich text area. You are also able to upload images directly to the image library form this function. For further information, please see this article

Insert link

This option will allow you to create a hyperlink from text or images. Note: This option will only show in bold when you have highlighted some text or an image.

To create a hyperlink, firstly highlight the text you would like to link, and then select the 'Insert Link' icon on the formatting bar.

There are four types of link you can create:

  1. Internal link

  2. External link

  3. Email link

    1. Fields:

      1. E-mail - enter the email address you want linked

      2. Subject - enter the subject line you would like the email to pre-populate for the user

      3. Link Title - the information that will be used for accessibility e.g. 'This link will open your email client and start a new email'

      4.  - no action required, leave this field as it is

      5. CSS style - leave this blank

  4. Anchor link creation documentation

Unlink

This option will remove a hyperlink from text or an image

Insert/Edit table

This option will allow you to insert a table into the rich text area

Insert row before

This option will insert a row above the row that your cursor is in when the option is selected

Insert row after

This option will insert a row below the row that your cursor is in when the option is selected

Delete row

This option will delete the row that your cursor is in when the option is selected

Insert column before

This option will insert a column to the left of the column that your cursor is in when the option is selected

Insert column after

This option will insert a column to the right of the column that your cursor is in when the option is selected

Delete column

This option will delete the column that your cursor is in

Split merged table cells 

This option will split table cells that have previously been merged

Merge table cells 

This option will merge table cells that you highlight before using the option

Edit HTML source

This option will allow you to edit using an HTML editor. Note: Your website as a specific style sheet. Therefore, if you try to use any HTML that is not supported, it will be stripped upon saving to ensure a consistent look and feel on your website

Quote

This Quote element will insert a pull-quote in your text area, complete with the option to add an author to it

Smart embed

This option will allow you to embed content into the rich text area of the page. For further information, please see this article

 

Related articles