Moodle- The HTML Editor


UW-Madison has adopted Canvas as its single, centrally supported learning management system. As of 6/1/2018, support for Desire2Learn (D2L) and most Moodle courses has been discontinued. Access to those courses has permanently ended. However, certain Moodle courses that are part of the Adanced Quizzing Content Functional Gaps project are still available on Moodle. Those courses are located on the Moodle Extension site.

Moodle 2.0, 2.1, 2.3

Moodle offers a text editor in most of the text areas.  The editor looks much like those in common word processors.   This document gives a brief overview of the text editor icons and provides simple instructions for these common tasks:
  • Create a link
  • Remove a link
  • Create a hidden block
  • Insert an image
  • Insert sound, video or applet
  • Insert a non-breaking space
  • Insert a special character
  • Using the Math editor

More Help

The MoodleDocs website has a full, visual explanation of the editor at As you use the editor, you may find it useful to roll your mouse over an  icon, displaying the label, to see what it does.

  • To view the HTML editor window in full screen, click the Toggle full screen mode button at the right of the top row. Clicking the button again will shrink the screen back to its normal size.
  • If you are knowledgeable with HTML, you can view/edit the HTML source code in a new window by clicking the “Edit HTML Source” button, marked "HTML" on the bottom row.

Formatting Text

  • To change the font, size, or format of your text, use the “Font family”, “Font size”, or “Format” drop-down menus respectively.
  • Use the “Undo” button undo a recent change and the “Redo” button to undo an undo.
  • The left section of buttons in the middle row allows you to use bold, italics, underline, strikethrough, subscripts, and superscripts.
  • The next section of buttons to the right allows you to align text or objects.
  • To change the text color or background color, use the “Select text color” or “Select background color” at the right side of the middle row.
  • To create a bulleted or numbered list, use the “Unordered list” or “Ordered list” buttons at the left side of the bottom row.
  • The next two buttons to the right allow you to decrease and increase the indent of your text or the level your list.

Special Text Editing Tools

Editing tools

  • The find button (binoculars icon) allows you to find characters, words, or phrases in your HTML text.
  • The find and replace button (A/B arrows icon) allows you to replace characters, words, or phrases with other text.
  • Clicking the spellcheck button (ABC checkmark icon) turns on highlighting for misspelled words. You can click on the highlighted words for a list of suggested spellings.

Text insertion tools

  • The remove messy code button (paintbrush icon) removes any messy HTML code. Messy code is also automatically removed when you toggle from the HTML view to editor view.
  • The remove formatting button (eraser icon) eliminates any bold, italic, or underline formatting, but leaves spacing, indentation and lists.
  • The paste as plain text button (clipboard with ‘T’ icon) allows you to paste text into the editor while removing any formatting. This is useful for pasting in plain text, or pasting in formatted text from which you would like to remove the formatting.
  • The paste from Word button (clipboard with ‘W’ icon) allows you to paste text into the editor from Microsoft Word while maintaining the formatting.

Common Tasks

Create a link

  1. In your text, type the name that will be displayed for the link.
  2. Highlight those words, then click the Insert/edit link icon in the bottom row of the HTML editor page. The icon looks like metal chain links.
  3. In the Link URL field, enter the address of the target website.
  4. Use the Target dropdown menu to choose whether the link opens in the same window, or in a new window.
  5. Click Insert to place the link in your text.

Remove a link

To remove a link, highlight the existing link and click the “unlink” icon, which looks like a metal chain breaking.

Create a hidden block

  1. First, highlight the text that you want to hide.
  2. Click the Create hidden block button in the bottom row on the far right side. This text is now within a hidden block and will only appear to students after they click the Show answer link.

Insert an image

  1. first click the tree icon in the HTML editor. 
  2. Locate the image
    1. If you are taking your media from the internet, enter the URL of the image and skip to step 3.
    2. If you using an image stored in Moodle, click Find or upload an image.  You'll see the File Picker window, with a variety of repositories listed along the left side.
      1. To upload an image, click Upload a file.
      2. Click Choose File.
      3. Navigate to the appropriate file and click on it.
      4. Click  Open.
      5. Click Upload this file.
    3. If the image is located in one of the other repositories listed in the left column, navigate to the file and select it.
  3. Enter text in the Image description field.
  4. After you have chosen your media, you have the option to altering its appearance using the Appearance and Advanced tabs.
  5. Once your media is ready, click Insert.

Insert a sound, video, or applet

  1. Click the film icon.
  2. Locate the sound, video, or applet
    1. Click Find or upload an image.
      1. To upload an image, click Choose file.
      2. Navigate to the appropriate file and click on it.
      3. Click Open.
      4. Click Upload this file.
    2. If the image is located in one of the repositories listed in the left column, navigate to the file and select it.
  3. Click Insert.

Insert non-breaking space character

This is a different type of the space character that prevents an automatic line break line wrap at its position.
Click the crossed out arrow icon for this space character.

Insert custom character

To insert a custom character, click on the blue omega symbol in the bottom row near the right side to select from an array of custom characters.

Using the Math Editor

  1. To insert an equation, click the insert equation (square-root-of-alpha) symbol on the bottom row to open the Math Editor.
  2. You will see several drop-down menus along the top of the MathML editor. Mathematical symbols are sorted into these menus by category: one for Greek letters, one for trigonometric expressions and so on. Simply click on the desired symbol to enter in into the equation.
  3. It’s important to work “from the outside in” when using the MathML editor. That is, insert the symbols that appear on the outside of the equation first, then enter the internal operations or variables into the blank boxes that appear with the operation. In the equation below, for example, the user first chose the cos2 symbol, then enter the θ in the blank box.
  4. When you are finished formatting your equation, click the Insert button at the bottom of the math editor. You can always edit the equation by selecting it and clicking the insert equation icon in the HTML editor.

Keywords:html test editor pictures images video embed format edit hidden block insert media create table 2.3   Doc ID:21257
Owner:Deborah H.Group:Moodle
Created:2011-11-11 14:29 CDTUpdated:2018-02-16 11:09 CDT
Sites:DoIT Help Desk, Moodle
Feedback:  5   2