Overview: TinyMCE Editor in Moodle ISU

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.]

The Second Row of the HTML Editor

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

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

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