M02 - Text editor

Keywords: topic names, labels, pages.

TinyMCE Text Editor in Moodle

TinyMCE is a user-friendly text editor in Moodle, designed to simplify the creation and formatting of course content. It enables users to easily style text, add equations, add images, embed video and audio, and create accessible, structured content. This guide provides an overview of TinyMCE’s functionality, accessibility features and usage within Moodle.

Accessing the TinyMCE editor

The TinyMCE text editor is available in several areas across Moodle where text can be added:

• Text and Media areas - areas where subtitles and descriptions can be added to the content area of a Moodle course homepage.
• Pages - pages linked from the Moodle course homepage.
• Books - multiple pages, with a menu.
• Discussion forum messages - posting or replying to others in a Moodle course.

Why use it?

The TinyMCE editor enables you to style your text.

Text can be used to add a Topic name and a short description to a section.

Text and Media areas can be used:

• To create a section or a subheading in a long list of activities.
• To display an embedded video, audio or a code on the course page.
  
• To add a short description to a section.

Pages are used to create a web page to display text, images, audio, video, web links and embedded code (such as Google maps).

Who can use it?

All Moodle users use the text editor wherever they are able to add rich text. For example, students and staff will see the text editor when drafting discussion forum messages, editing user profile descriptions and adding glossary definitions.

Additionally, Moodle course editors (tutors and course administrators) will be able to use the text editor when writing descriptions for activities they add to Moodle courses and when drafting content in Text and Media areas, Pages, and Books.

Accessibility Features in TinyMCE

TinyMCE includes several features aimed at making content accessible for all users:

• Keyboard Navigation: Supports full navigation via keyboard shortcuts.
• Screen Reader Compatibility: Designed to work smoothly with screen readers.
• Semantic HTML: Ensures clean HTML structure, which aids assistive technology interpretation.
• Alt Text for Images: Allows for descriptive text for images, improving accessibility for visually impaired users.
• Accessible Toolbar: Toolbar buttons are labelled for screen readers and support keyboard shortcuts.
• Integrated Accessibility Checker: The editor provides real-time feedback on accessibility issues such as missing alt text, improper headings, and contrast issues.

Meeting the Baseline

The  UCL Connected Learning Baseline suggests the following for Accessibility: 

• 7.1 Provide accessible learning resources by ensuring:
  
  • Layout is clear, with good spacing, including text that isn’t cramped or dense.
  • Graphics have alternative text (for screen-readers).
  • Navigation is consistent between modules.
  • Fonts are large enough to read (minimum 10pt).
  • Coloured text has high contrast against backgrounds.
  • Links are descriptive (avoiding 'click here'). 
  • Resources provided are in accessible formats and 48 hours in advance of lectures where relevant/appropriate.
• 7.2 Links open in the same window – so the student can use the browser back button. *If a new window is essential (e.g. to provide pop-up help) warn the students by labelling the link with '(this link will open in a new window)'.
  
• 7.3 Adhere to the UK Equality Act - If a student with a disability requests an accessible format of any resource, this must be provided, within reason. Read more at www.ucl.ac.uk/disability.

How do I set my preferred text editor?

The default Moodle text editor is called TinyMCE. You can choose to use Atto editor, however, it is recommended you use TinyMCE as the support for the Atto editor has been discontinued.

To set your preferred text editor:

1. Hover over your name in the top right corner of any Moodle page and select 'Preferences'.
2. Within User Account, click 'Editor preferences'.
3. Either keep the text editor set to Default editor to ensure you are always using the supported text editor (TinyMCE), or otherwise choose:
   • Atto HTML editor: has some more advanced table editing features and supports right-click.
   • Plain text area: removes all rich text functionality, so you can either write plain text or HTML (note: the <> HTML edit function in both text editors also allows you to edit HTML directly).
4. Click 'Save changes'.

Caution

Avoid:

• underlining anything that isn't a link.
• using CAPITALISED text.
• using italicised text.
• using text colours with low contrast to the background (colours must meet WCAG AA contrast ratios).
• adding images without adequate captions, or descriptions (unless the image is purely decorative and it can be left blank).
• adding videos that do not have subtitles:
  *YouTube provides accurate auto-captioning, so if your video is public, uploading the video to YouTube is a good option to improve the accessibility of your resources to students. This helps students who are hard of hearing or who may not be able to listen to the audio track, because they are in a public place and may not have headphones.

Examples and case studies

Advantages of entering text directly into pages, books and lessons, rather than files include:

• the resource is easily accessible:
  • to users of mobile devices and students can use apps like Pocket to save an offline version.
  • to those using assistive technologies (like screen readers and browser plugins) that read text aloud and may alter its presentation on the screen for better readability.
• the content is easier for course editors to update.

Questions & Answers

None at this time.

Further information

Find out how to perform particular functions within the text editor:

• M02a - Text Formatting
• M02b - Add images
• M02c - Embed video, audio and other media
• M02d - Equations editor
• M02e - Lecturecast Media Embedding