Moodle Help & Support 

 

This refers to Moodle 4.3 from July 2024 onwards

TinyMCE 6 Text Editor in Moodle  

TinyMCE 6 is a new text editor enabled in Moodle that contains a lot of useful features to help create and edit content. Below is a breakdown of the functionality available.  

 Undo button

Undo button 

 Redo button

Redo button 

 

Bold button 

 Italics button

Italics button 

 Text foreground colour

Text foreground colour, enables a selection of accessible colours to pick from.  

 Nottingham Blue, Jubilee Red, Forest Green, Civic Purple and Black available in TinyMCE.

When selected, the following colours are available, Nottingham Blue, Jubilee Red, Forest Green, Civic Purple and Black 

  Add image button

Add image button, enables the ability to insert an image.  

 Multimedia button

Multimedia button, ability to add URLs of video or audio. 

 Echo360 (Engage) button

Echo360 (Engage) button, to embed Echo recordings (for UNUK and UNM) 

  H5P button

H5P button, to add H5P content 

 Mediaspace embed button

Mediaspace embed button, to embed videos from Mediaspace/Kaltura.  

 

Add a hyperlink/URL button 

 

Remove hyperlink/URL button 

 Panopto button

Panopto button, to add Panopto recordings (for UNNC only). Please do not add or record any video on Panopto if you are based on the UK or Malaysia campuses as they will be removed. 

 More options button

More options button, this will open up extra icons on the toolbar. If you only see a top row of tools press this button to open up another row of tools.  

 Full screen button

Full screen button, to make the text editor enlarge to the full screen. 

 Align left

Align left, will align text to the left of the page.  

 Align centre

Align centre, will align text to the centre of the page.  

 Align right

Align right, will align text to the centre of the page.  

 Left to right text

Left to right text, this will make the text appear from the left side on the text editor.  

 Right to left text

Right to left text, this will make the text appear from right to left on the text editor. 

 Decrease indent

Decrease indent, this will move the text more to the left.  

 Increase indent

Increase indent, this will move text more to the right. 

 Bullet list

Bullet list, this will add a bullet list. 

 Numbered list

Numbered list, this will add numbered list.  

 Equation editor

Equation editor, this will open the equation editor to write equations.  

Edit menu 

 The edit menu in TinyMCE editor

Undo, will undo previous text written. 

Redo, will re-add any previous deleted text.  

Cut, will cut any selected text/image that was written.  

Copy, will copy any selected text that was written.  

Paste, will paste any text that was copied.  

Paste as text, will paste anything copied as a form of text, if it can.  

Select all, this will select all items in the text editor box 

Find and replace, this enables the ability to enter text to be found and replace it with other text.  

View Menu 

 The view menu in TinyMCE editor

Source code, will display the source code of the text editor.  

(Please ensure you press the ‘Save’ button before exiting the source code page to ensure any changes have been saved.)

The source code editor in TinyMCE editor

Visual aids, is enabled by default and will display a light grey box around any tables that have been created in the text editor.

Show invisible characters, this will display any hidden characters in grey such as space.

Showing invisible characters in TinyMCE editor

Show blocks, will add a grey block around the text and display what style they are using.  

Show blocks example in TinyMCE editor

Fullscreen, will open the text editor in full screen to give you more space. If you need to come out of the full screen option click on View and then Fullscreen again, or CTRL+Shift+F on the keyboard.  

Fullscreen view in TinyMCE editor

Insert menu 

The insert menu contains a lot of the functionality that has already been listed in this document. This section will only cover new functionality found in the Insert menu.  

Insert menu in TinyMCE editor

 Code sample, enables the ability to display code in a particular format. Please ensure you press the ‘Save’ button within the Code sample text box to ensure any changes are saved.  

 The code sample editor in TinyMCE editor

What display of code appears like for the user in TinyMCE editor

How it is displayed in the text editor.  

Table, gives the ability to select the width and cells of the table to be added to the text editor. 

 Table editor in TinyMCE editor

Special character, enables the ability to add characters like currency into the text editor.    

Special character selection in TinyMCE editor 

Emojis, enables the ability to add a selection of emojis.  

 Emoji selection in TinyMCE editor

Horizontal line, will add a light grey horizontal line onto the text editor.  

 Adding horizontal line in TinyMCE editor

Page break, Nonbreaking space and Anchor, are functionality that does not work within this type of text area. 

Date/time, enables the ability to add time and also date. Please be aware that the date is month/day/year and not day/month/year.  

Format menu 

The Format menu contains a lot of the functionality that has already been listed in this document. This section will only cover new functionality found in the Format menu.  

 Format menu in TinyMCE editor

Underline, enables the ability to underline words.  

Strikethrough, enables the ability to add a line through words.  

Superscript, enables the ability to add a superscript in the text editor. 

Subscript, enables the ability to add a subscript in the text editor. 

Code, will switch the format to write code  

 Code editing in TinyMCE editor

Blocks, enables the ability to apply different heading styles to text, such as Heading 3 and Paragraph.  

 Blocks of heading and text style in TinyMCE editor

Line height, gives the ability to adjust the line height between lines of text.  

 Setting the line height in TinyMCE editor

Clear formatting, this will remove all formatting from selected text in the editor.  

  Clear formatting option in TinyMCE editor

 

Tools menu 

Tools menu in TinyMCE editor

Source code, will switch the text editor to display the source code of the page. Please ensure you press the ‘Save’ button if you make any changes and wish to switch back from source code view.  

 View the source code in TinyMCE editor

Word count, will display the number of words and characters used.  

 Word count option in TinyMCE editor

Wordcount in footer of TinyMCE editor

The word count also appears at the bottom right of the text editor. 

 Accessibility checker, will check through content that is within the text editor for accessibility improvements. (note this is different to the Brickfield accessibility + report, or a full accessibility analysis of your module please use the Brickfield accessibility + tool).

 Accessibility checker button in TinyMCE editor

Showing accessibility errors in TinyMCE editor

A pop-up window will appear when the check is complete.  

Media manager, provide s a list of media added to the text editor. It also provides the ability to delete any embedded files not used in the text area, so helps with file management.  

 Media manager TinyMCE editor

Table menu 

 Table menu in TinyMCE editor

Table, provides the ability to create a table by selecting the number of cells in width and length.  

 Adding a table in TinyMCE editor

Cell, provides options such as Cell properties that gives width and height options. Merge cells will merge selected cells from the table and Split cell will split the cell  

 Editing cells in TinyMCE editor

 Within Cell properties you can add Header cells to the table which improves the accessibility of the table, specifically assistive technologies that reflow text. To do this select ‘Header cell’ from the ‘Cell type’ dropdown menu and then pressSave’.  

 Cell properties in TinyMCE editor

Once applied the header row will be displayed in bold.  

 An example table in TinyMCE editor

This can also be done in the by selecting 'Row' and 'Row Properties', which enables the header to be applied across the whole row. 

Table dropdown menu

Within 'Row Properties' select 'Header' from the 'Row type'. 

Row properties window

Row, gives the ability to insert rows before or after, delete, cut, copy and paste before and after. It is also possible to access the row properties too  

 The row menu in TinyMCE editor

Column, gives options to insert columns before and after as well as delete, cut, copy and paste columns 

Column menu in TinyMCE editor 

Table properties, provides adjustment options to the width and height of the table. Please also check the ‘Show caption’ check box to add a caption and press ‘Save’.  

 Table properties menu in TinyMCE editor

You now can write a caption that can be read by screen readers and other assistive technologies. This will appear at the bottom of the table.  

Table caption shown in TinyMCE editor 

Delete table, will remove the table from the text editor 

 Delete table button in TinyMCE editor

Help menu 

Help menu provides some useful information such as keyboard shortcuts.  

 The help menu in TinyMCE editor

 

 

 

  • No labels