Rich text editor

Use this guide to add and edit the Rich text editor component.

Features

The component:

• is used to place and format text on your web pages
• allows you to create hyperlinks and tables, where necessary
• can be used on the homepage, content page, news articles, events, the contact page and inside the column control on these pages
• it is used in the album component, event component, news article component, and newsletter component.

Before you start

Navigate to the page where you want to add or edit a rich text editor and you are ready to begin. 

Already have a component? Go to our guide on the formatting tools.

Step 1: Add rich text editor component

• Select Drag components here.
• Select the plus icon.

• Select Rich text editor from the Insert New Component list.

Step 2: Edit the rich text editor component

• Select the Rich text editor component.
• Text components that you add will be outlined in blue. The words 'Rich text editor' also appear in the bottom right corner of the box. 
• Select the spanner icon to format your text. This is the Configure button. 
• If you can't edit a component, it might be global content added by the department. See our global content guide for more. 

Step 3: Format your text 

• Select the rectangle in the top right of the pop-up to enlarge the Rich text editor. This is the Toggle Fullscreen button.

• You can copy and paste text from Word or other applications into the Rich text editor.
• You cannot use right click to get the paste option. You will need to use keyboard shortcuts or the edit menu from the top left of your browser window.

Formatting tools 

Bold text

• Use bold if you must add emphasis to a particular word or phrase within a sentence.
• Don't use bold text for headings. Instead, use the heading styles.

Italics

•  Use italics for scientific names or foreign words used within an English sentence.
• Go to the department's style guide for more information. 

Align text

• Do align all text to the left. 
• This helps to make your web pages accessible. Go to the Accessibility toolkit for more information. 

Lists

• In general, opt for bulleted (unordered) lists rather than numbered (ordered) lists.
• Numbered lists make more sense if you're talking about a step-by-step process.

Subscript and superscript

• Select the A icons to add superscripts or subscripts for mathematical notations.

Hyperlinks

• Write or find the text you want to add your link to. 
• Highlight the text and select the chain icon from the toolbar. This is the Hyperlink button.

Option 1: Add a link to an external page 

• You can hyperlink pages outside of your school's website, such as Skoolbag or Sentral pages.
• In the Path field, enter the full URL of the web page you want to direct your users to. 
  • You can use shortcut keys Ctrl + C to copy the link from the web page and Ctrl + V to paste it into the path field.

Option 2: Link to one of your documents in assets or to another page on your school website

• Select the charcoal tick.
• This will give you the option to search through your assets or the pages on your school's website.

• To hyperlink a document, navigate through your assets to your school's folder where you have previously uploaded your PDF or document. 
• Once you have found your document, select the file name. Your selection will turn blue.
• Select the Select button in the top right. 

• To hyperlink another page on your website, navigate through your pages and find the page you'd like to use.
• Once you have found your page, select the file page name. Your selection will turn blue.
• Select the Select button in the top right. 

Option 3: Add a link to an email address

• In the Path field type mailto:
• Don't forget to type the colon symbol.
• Enter the full email address to which you would like to link. 

Save your hyperlink

• When you have added your hyperlink to a document, page on your school's website or an external web page you need to save the hyperlink.
• Select the tick icon in the bottom right.

• To remove any hyperlinks, select the broken chain icon.
• This is the unlink feature.

Anchor links

• Use the anchor icon to add anchor links to your page. Anchor links allow you to jump from one part of the page to another part.
• Place your pointer before the heading you wish to anchor.
• Select anchor icon and write your text in the box then select the blue tick. Example: step4
• Your heading will be anchored. You can add the text after the URL using # key. Example: #step4

Search and replace

• Use the magnifying glass and pen icon to search and replace. You can search content in your document and replace text automatically.    

Spell check

• Select the ABC tick icon to perform a spell check of your text.

Special characters

Select the star icon to add special characters to your text for example:

• TM
• registered
• copyright. 

Structure your page using headings

• Select the text that will be the first heading on your page.
• Select the paragraph icon.
• A drop-down will appear with the heading levels that you can choose from.
• The first heading on the page that you add will be a Heading 2.
•  Go to the Accessibility toolkit to learn more about the correct way to structure your headings on a page. 

Lead paragraph

• Select the S icon to format your first paragraph as a lead paragraph. This will make the paragraph stand out from the rest of your text.
• You should use only one lead paragraph per page. Adding more than one may cause extra anchor boxes to appear on the page.
  

Tables

• Place your cursor inside the Rich text box and select Table icon to enter a table in your Rich text component. Learn more on how to create and use tables.

Save and close

• Select the tick on the top right of the pop-up to save the settings.
• Select the cross on the top right of the pop-up to close the component without saving. 

Troubleshooting

• If the formatting tools do not appear above the Rich text editor, make sure you have selected inside the editor.
• Copy and paste do not work in the Rich text editor. You will need to use Control C to copy and Control V to paste. We are working on a future enhancement to make this easier. 

Publish your changes

• For changes to be updated on your live school website you will need to publish the page. 

 You may also find useful:

• News articles
• Events