What is TinyMCE?

TinyMCE is a powerful rich-text editor that allows users to create formatted content within a user-friendly interface. You can see and use the text editor on many pages in Moodle that allow you to insert text like Forums, description boxes, and sometimes within activities like Assignments and Quizzes. 


 



TABLE OF CONTENTS

What is TinyMCE?



TinyMCE Toolbar Buttons

When you access a page on Moodle that allows you to enter formatted text you will see the toolbar for the TinyMCE text editor. Many of these buttons may look familiar to you from using other word processing applications. The buttons you will use most often are listed across the second and third rows of the toolbar appearing as icons. Hovering over these buttons will tell you what they do if you are unsure. 


TinyMCE Toolbar shows extra menu items accross the top and quick access buttons below. You may need to click the "..." to see all the buttons available


Toolbar IconPurpose

Bold

Toggles bold formatting to selection.

Italic

Toggles italic formatting to selection.

Text Foreground ColorChanges the text color of the text, choose from a list of preselected text colors. Please mind color contrast rules for digital accessibility.
Text Background ColorChanges the background color of the text, choose from a list of preselected text colors. Please mind color contrast rules for digital accessibility.

Insert Image

Adds an image <img src="..."> at the current cursor or selection.

Insert MediaNot Recommended, media/video files should be shared using the Yuja button instead, not uploaded directly into Moodle
H5P
Allows the addition of H5P Interactive content. Browser repository and choose your H5P activities from your Content Bank. 
Hyperlink

Inserts a link at the current selection. The value is the URL to add to the link(s).

Unlink

Removes any links from the current selection.

YujaInsert or Record Yuja video content. 
Expand ScreenSee a large screen version of the TinyMCE text editor.

Justify Left

Left aligns the current text block/image.

Justify Center

Center aligns the current text block/image.

Justify Right

Right aligns the current text block/image.

Left to Right

Set the reading/typing direction. 

Right to Left

Set the reading/typing direction. 

More...

Shows any hidden buttons in a second row of icons. This can happen when viewing on a small screen.

Bulleted List

Inserts bullet points before a line of text, used to create an unordered list. 

Numbered List

Inserts numbers before a line of text, used to create an ordered list. 

MathTypeInsert a math equation.
ChemTypeInsert a chemistry formula.



Contextual Menu & Headings

Image showing the contexual menus that appear as you select tables, text, and images in the TinyMCE Editor

You may also notice contextual menus while editing your text. These can occur when you click on a table, text, or image and they will give you quick easy access to menu items relevant to the content you selected. This is a quick and easy way to add Headings to your text. Note that Headings start at H3 (Heading 3), because H1 (Heading 1) and H2 (Heading 2) are already being used for your Course and Section Titles. Using headings can help make your course accessible for those using screenreaders to navigate your course!   



TinyMCE Menu Options 


Across the top of the toolbar, there are additional menu items. These are listed below with all their options, the Format menu is especially important because this is where you can set Headings to ensure that your text is accessible in Moodle. You may also see the keyboard shortcuts listed for many of these items that you can use to quickly complete your most common tasks, rather than sorting through the menu to click the button every time. 


Edit

Edit Menu
Edit Menu Options
Edit Menu Options on TinyMCE
  • Undo Ctrl + Z - Undoes the last change to the editor.
  • Redo Ctrl + Y - Redoes the last change to the editor.
  • Cut Ctrl + X - Cuts the selected contents and puts in into users clipboard.
  • Copy Ctrl + C - Copies the selected contents and puts in into users clipboard.
  • Paste (with formatting retained) Ctrl +V - Pastes the current clipboard contents into the editor.
  • Paste as text (without formatting)*
  • Select all - Ctrl+ A - Selects all content in the editor.
  • Find and Replace - Ctrl + F - Search for text on the page and replace it. 


*Some items include a keyboard shortcut and some items do not.   


View

View MenuView Menu Options
An image of the View menu on the TinyMCE Text Editor
  • Source Code - allows you to see the source code for your post. You can use this view and insert HTML code for objects like an embedded Youtube video or edit code to troubleshoot issues or apply a style/HTML properties to your content. 
  • Visual Aids - allows you to toggle on and off content appearance options
  • Show invisible characters - allows you to toggle on and off the markup language 
  • Show blocks - allows you to toggle on and off viewing the paragraph and heading structure for your text
  • Fullscreen - Ctrl + Shift + F - Toggle into Fullscreen mode

   

Insert

Insert MenuInsert Menu Options
Insert Menu Options on TinyMCE
  • Image - Adds an image <img src="..."> at the current cursor or selection.
  • Link Ctrl + K - Add a URL link to a website.
  • Multimedia - Not recommended, do not use. Use Yuja to upload and share media/video instead.
  • Code sample - Allows you to share code in the text editor with Moodle trying to load/display the code output. This is helpful for Computer Science classes focused on coding languages. 
  • Table - Insert a table by selecting the amount of rows and columns
  • Special character - Insert a special character 
  • Emoji - Insert an emoji
  • Horizontal line - Inserts a horizontal rule at the cursor location or in place of the current selection.
  • Page break - Insert a page break
  • Nonbreaking space - Insert a space that should not break across a page
  • Anchor - Insert a bookmark that will allow you to link to this section of text later. 
  • Date/time - Insert data formatted as a date and time (uses Hour, Minute, Second and Year, Month, Day) 
  • MathType - Insert a math equation.
  • ChemType - Insert a chemistry formula.
  • Configure H5P Content - Allows the addition of H5P Interactive content. Browser repository and choose your H5P activities from your Content Bank. 
  • Yuja Media Chooser - Insert or record Yuja video content. 


Format

Format Menu
Format Menu Options
Format Menu Options on TinyMCE
  • Bold Ctrl + B - Toggles bold formatting to selection.
  • Italic Ctrl + I - Toggles italic formatting to selection.
  • Underline Ctrl + U - Toggles underline formatting to selection.
  • Strikethrough - Toggles strikethrough formatting to selection.
  • Superscript - Toggles superscript formatting to selection.
  • Subscript - Toggles subscript formatting to selection.
  • Code - Displays code in bright red text in line. 
  • Blocks
    • Paragraph
    • Heading 3
    • Heading 4
    • Heading 5
    • Heading 6
    • Preformatted
  • Algin
    • Left
    • Center
    • Right
  • Line height - Set the vertical spacing between your lines. 
  • Clear formatting - Removes any formats from the current selection.
  • Text Color


Tools

Tools Menu
Tools Menu Options
Tools Menu Options on TinyMCE
  • Source code - Alter the appearance of your text/media by altering the properties of the HTML code.  
  • Word count - Count of all words and characters in the text editor box. 
  • Accessibility checker - TinyMCE will give you helpful suggestions to make your content more digitally accessible.
  • Media manager - A file storage area that shows all files loaded into the text editor.  


Table

Table Menu
Table Menu Options
Table Menu Options on TinyMCE
  • Table - TinyMCE comes with comprehensive table management functionality to handle grid-like structures in your text.
  • Cell
    • Cell properties
    • Merge cells
    • Split cells
  • Row
    • Insert row before
    • Insert row after
    • Delete row
    • Row properties
    • Cut row
    • Copy row
    • Paste row before
    • Paste row after
  • Column
    • Insert column before
    • Insert column after
    • Delete column
    • Cut column
    • Copy column
    • Paste column before
    • Paste column after
  • Table properties
  • Delete table


Help

The Help menu gives you access to a full list of handy shortcuts, keyboard navigation details, and lists our current version of TinyMCE installed on Moodle.