Overview: TinyMCE Editor in Moodle ISU

Summary

The TinyMCE editor in Moodle ISU appears on any page where text can be entered. You can use the editor to manipulate text, insert images, create links, etc.

Body

Description

The TinyMCE editor in Moodle ISU appears on any page where text can be entered. You can use the editor to manipulate text, insert images, create links, etc.

This Guide Will Help You to:

  • Identify Icons in the Moodle ISU TinyMCE Editor

    • The First Row of the TinyMCE Editor

    • The Second Row of the TinyMCE Editor

  • Editing in HTML

Identify Icons in the Moodle ISU TinyMCE Editor

Icons on the toolbar may be used to assist you with formatting, inserting, linking, and other functions in Moodle ISU.

The First Row of the TinyMCE Editor

[Note: You may need to highlight the desired word or words before selecting the button in the HTML editor in order for those words to be impacted, such as adding Bold, Italics, or other options.]

Undo - Select this button to undo the previous action.

Redo - Select this button to redo an action.

Bold - Select this button to bold any sentence or word.

Italic - Select this button to italicize any sentence or word.

Text Foreground Color - Highlight text and select this button to determine the text color.

Sketch - Select this button to open the Sketch tool. Use a stylus, finger, or mouse to create / edit images and then select “Insert Sketch” to add the image to the editor.

Image - Select this button to add an image.

Multimedia - Select this button to insert multimedia, including links to media, videos, or audio files..

Record Audio - Select this button to record audio files and embed them directly into the editor.

Record Video  -Select this button to record video from your webcam and embed it directly into the editor. This has a 2-minute maximum recording time.

Components for Learning (C4L)  - Select this button to open C4L, which provides a set of visual components designed explicitly for Learning. 

H5P - Select this button to create and embed H5P content. 

Link - Select this button to create a link.

Unlink - Select this button to remove a link.

Record Screen and Camera - Select this button to record your screen (with the option to also record you in a small bubble) for up to 5 minutes and embed it in the editor.

Preview -Select this button to open a preview of the text screen to show what the page will look like when it is published.

Panopto Recorder - Select this button to open the Panopto recorder and select either the Panopto Browser Tool or Panopto App for recording. 

More - Select this button to open the second row of the TinyMCE editor.

 

 

The Second Row of the HTML Editor

Note: You may need to select the show more button to see this additional row of buttons.

Align Left - Select this button to  align the text or image with the left-hand margin.

Align Center - Select this button to center the text or image on the page.

Align Right - Select this button to align the text or image with the right-hand margin

Left to Right Directionality - Select this button to type left to right, such as for English.

Right to Left Directionality - Select this button to type right to left, such as for Arabic.

Decrease Indent - Select this button to decrease the indent of a paragraph.

Increase Indent - Select this button to increase the indent of a paragraph.

Bullet List - Select this button to create a bullet list.

Numbered List - Select this button to create a numbered list.

Equation Editor - Select this button to create and edit equations.

 

View Menu

  1. Source code -  Select this to open the source code pop-up window, where you can view and edit the code for the page (HTML or JS.)

  2. Visual aids - Select this to toggle on / off borders around table cells.

  3. Show invisible characters - Select this to show invisible characters, such as paragraph breaks.

  4. Show blocks - Select this to highlight HTML tags such as Divs, Spans, Paragraphs, and lists.

  5. Fullscreen - Select this to view the TinyMCE editor in fullscreen mode.

  6. Preview - Select this button to open a preview of the text screen to show what the page will look like when it is published.

Insert Menu

  1. Image - Select this to insert an image into the page.

  2. Link - Select this to create a link on the page.

  3. Components for Learning (C4L) - Select this button to open C4L, which provides a set of visual components designed explicitly for Learning. 

  4. Multimedia - Select this to insert existing audio or video clips.

  5. Record audio - Select this to record audio, and embed it into the page.

  6. Record Video - Select this to record video from your webcam (2 minutes maximum.)

  7. Code sample - Select this to insert and embed syntax color highlighted code snippets into the editable area.

  8. Table - Select this to insert a table into the page.

  9. Special Character - Select this to insert special characters into the page.

  10. Emojis - Select this to insert emojis into the page.

  11. Horizontal Line - Select this to add an HTML line to your text.

  12. Page break - Select this to add a page break (<p>) to your text.

  13. Nonbreaking space - Select this to add a nonbreaking space at the current cursor location.

  14. Insert Anchor - Select this to add anchors to your text.

  15. Date / Time - Select this to insert the current date and / or time at the cursor point.

  16. Equation Editor - Select this to launch the equation editor for creating and inserting equations.

  17. Configure H5P content - Select this to open the H5P editor and insert H5P content into the page.

  18. Record Screen - Select this to record your screen (with the option to also record you in a small bubble) for up to 5 minutes and embed it in the editor.

Format Menu

  1. Bold - Select this to bold text on the page.

  2. Italic - Select this to italicize text on the page.

  3. Underline - Select this to underline text on the page.

  4. Strikethrough - Select this to strikethrough text on the page.

  5. Superscript - Select this to create superscript text on the page.

  6. Subscript - Select this to create subscript text on the page.

  7. Code - Select this to type code into the editor.

  8. Blocks - Select this to select the heading structure of text.

  9. Align - Select this to select the alignment of text on the page.

  10. Line height - Select this to determine the line height of text spacing (this defaults to 1.5 spacing.)

  11. Clear formatting - Select this to clear the formatting of text on the page.

  12. Text foreground color - Select this to determine the color of text on the page.

Tools Menu

  1. Source code - Select this to open the source code pop-up window, where you can view and edit the code for the page (HTML or JS.)

  2. Word count - Select this to see the word count of the text in the page.

  3. Accessibility checker - Select this to open the accessibility checker and determine if there are any accessibility errors that need to be corrected.

  4. Media Manager - Select this to open the Media manager, where you can add media files.

  5. Sketch - Select this to open the Sketch tool. Use a stylus, finger, or mouse to create / edit images and then select “Insert Sketch” to add the image to the editor.

Table Menu

  1. Table - Select this to create and insert a table in the page.

  2. Cell - Select this to edit a cell in the table.

    1. Cell properties - Select to edit the cell’s properties.(border, color, size, alignment)

    2. Merge cells - Select to merge two cells together.

    3. Split cell - Select this to split a cell into two cells.

  3. Row - Select this to edit a row in the table.

    1. Insert row before -  Select to insert a row before the selected row.

    2. Insert row after -  Select to insert a row after the selected row.

    3. Delete row - Select to delete the row from the table.

    4. Row properties - Select to edit the row’s properties. (border, color, size)

    5. Cut row - Select to cut a row from the table.

    6. Copy row -  Select to copy a row in the table.

    7. Paste row before -  Select to paste a row before the selected row.

    8. Paste row after -  Select to paste a row after the selected row.

Editing in Source Code (HTML or JS)

  1. Select Source code from the View menu to access the source code editor.

  2. You will see the code that comprises the webpage.  

  3. Edit or Add HTML code to the page.

To save:

  1. Select Save and display to save the page.

  2. Select Cancel to delete the changes made to the page.

Seek Further Assistance

For additional assistance, please contact the ITRC at (208) 282 5880 or itrc@isu.edu

For more information, please visit Moodle.org: TinyMCE editor

Creative Commons License
This work was created by the Idaho State University Instructional Technology Resource Center and is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License

Details

Details

Article ID: 50362
Created
Thu 3/15/18 4:40 PM
Modified
Mon 9/9/24 6:21 PM

Related Articles

Related Articles (1)

The Glossary activity allows participants to create and maintain a list of definitions similar to a dictionary. This guide will be focused on entries and categories if you would like more information you can find it in the Glossary guide.