Rich text editor formatting

Owned by Tim Jones
Last updated: Mar 17, 2021
6 min read

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:
IconActionDescription

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.

BoldThis formatting will make the text that you apply it toĀ Bold

ItalicsThis formatting will make the text that you apply it toĀ Italicised

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

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

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

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

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

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

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

Bullet listThis formatting will provide a styled list of bullet points

Number listThis formatting will provide a styled, numbered list

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

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

Insert imageThis 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:
      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

UnlinkThis option will remove a hyperlink from text or an image

Insert/Edit tableThis option will allow you to insert a table into the rich text area

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

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

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

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

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

Delete columnThis 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 sourceThis 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

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

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