Learn@Illinois Moodle - Using the Atto HTML Text Editor

Learn how to use the Atto HTML text editor in your course site. The editor is what you are using whenever you enter text in your Moodle course site.

For a permanent link to this information, please use: https://go.illinois.edu/MoodleAttoEditor

If your text editor looks different, you may need to change your text editor, by following instructions on Changing your Text Editor

Note: Due to accessibility concerns, it is strongly recommended not to change the color of text, highlight text, or change the font size of text, as much as you can.

Contents

  1. Expanding the Toolbar
  2. Formatting
  3. Bulleting and Numbering
  4. Linking and Unlinking
  5. Adding Images
  6. Adding Video from Illinois Media Space
  7. Adding Video from Ensemble (Instructors Only)
  8. Adding Video from Another Site (Instructors Only)
  9. Adding Audio by Recording within Moodle
  10. Undoing and Redoing
  11. Underline and Strike Through
  12. Creating Subscripts and Superscripts
  13. Aligning Text
  14. Font and Background Colors
  15. Equation Editor and Special Characters
  16. Creating Tables
  17. Cleaning Up Formatting
  18. Accessibility Checker and Screenreader Helper
  19. Word Count
  20. HTML Editing
  21. Full Screen
  22. Autosave

Expanding the Toolbar

Your editing toolbar can be expanded by clicking the Toolbar Toggle button.

ExpandingToolbar.png

Formatting

Click the "i" Paragraph styles drop-down menu to create headings. We recommend using "Heading (large)," which corresponds to H3, for headings, and using "Heading (medium)," which corresponds to H4, for subheadings. This helps make your course site accessible to people using screen readers. Read more about typographic hierarchy.

Formatting.png

Bulleting and Numbering

BulletingAndNumbering.png

Linking and Unlinking

To link to something out of the course site:

  1. Highlight the text that you want to link and click the Insert/edit link button.
  2. In the "Create link" pop-up window, enter the link URL. Check the Open in new window checkbox to avoid inadvertently forcing someone to navigate away from the course website.
  3. Click the Create link button. The linked text will now be blue.
  4. To undo this, click on or select the link text, and click the Unlink button.
If you notice a link that you did not intentionally create, it is probably an autolink. Autolinking is feature of Moodle that automatically links to activities, glossary entries, or database entries where the title of that the activities or entries appear. To prevent something from autolinking, highlight the text and click the Prevent automatic linking button (the exclamation mark on the right of the links).

LinkingAndUnlinking.png

Adding Images

  1. To add an image, select the Insert/edit image button. You can find an image on your computer or elsewhere.
  2. To find an image on your computer, click Browse repositories...
    Note
    : To add an image from the internet, enter the URL in the "Enter URL".
  3. Next, click the Browse... button.
  4. Search for and select the image.
  5. Click the Open button, then click the Upload this file button. 
  6. In the "Describe this image for someone who cannot see it" field, enter an image description and then click the Save image. See Alternative Text for guidelines on image description.
    Note: 
    You can resize the image by changing the numbers under Size and checking the Auto size option. You can also change the alignment by selecting options from the drop-down menu.

AddingImages.png

Adding Video from Illinois Media Space

You should not upload audio or video files directly to Moodle. If you have the file hosted on Illinois Media Space, click the Embed Illinois Media Space rainbow starburst icon. See Embedding Audio or Video from Illinois Media Space for more details.

AddingVideo.png

Adding Video from Ensemble (Instructors Only)

You should not upload video files directly to Moodle. If you content is on Ensemble, see Adding CITL-Recorded Video Lectures to your Course.

Adding Video from Another Site (Instructors Only)

You should not upload video files directly to Moodle. You must have the file(s) hosted on another site/server. See Embedding Videos Using Code for instructions on how to embed video or audio from another site using code.

Adding Audio by Recording within Moodle

You can add audio recordings to your course content.

RecordAudio.png

  1. Click on the Record microphone icon.
  2. In the pop-up window that appears, click the Start recording button.
    Note: You will be able to record up to two minutes of sound.RecordingAudio.png
  3. Press Record again to re-record or, if you are done, click Embed Recording.

Undoing and Redoing

  • If you want to undo your last action, click the Undo left-facing arrow button.
  • If you would like to redo an action you just undid, click the Redo right-facing arrow button.

UndoingAndRedoing.png

Underline and Strike Through

  • If you want to underline a word or a phrase, click the Underline button.
  • If you would like to cross out a word or a phrase, click the Strike through button.

UnderlineAndStrikethrough.png

Creating Subscripts and Superscripts

SubscriptsAndSuperscripts.png

Aligning Text

  • To align text to the left, select the desired text and click the Align left button. 
  • To center text, select the desired text and click the Align center button. 
  • To align text to the right, select the desired text and click the Align right button.

AligningText.png

Font and Background Colors

Note: Due to accessibility concerns, it is strongly recommended to use caution in changing the color of text or highlighting text.

FontAndBackgroundColors.png

Equation Editor and Special Characters

EquationEditorSpecialCharacters.png

Creating Tables

To create a table, click on the Table grid icon. In the pop-up window that appears, adjust settings, and click Create table.

CreatingTables.png

Note: To edit an already existing table, please click within the table, and then press on the table button in the text editor for options to add columns, rows, and more.

Cleaning Up Formatting

To remove unwanted formatting, select the text that you want to change and click the Clear formatting cursor button.

CleaningUpFormatting.png

Accessibility Checker and Screenreader Helper

New features!

Accessibility.png

Word Count

If you want to check how many words you have typed, you can click on the Wordcount pound/hashtag icon, and it will show both word and letter counts.  

WordCount.png

HTML Editing

To edit the HTML code of your written text, you can click on the HTML icon. This can be useful to fix formatting, tables, links, and more!

HTML.png

Full Screen

To enter full-screen mode, click the Toggle full screen button.
Note: This can help with editing if there is a lot of material on the page. 

FullScreen.png

Autosave

Good news! The Atto HTML editor will automatically save your written text every 15 minutes. If you accidentally leave the page, you can still see the saved text when you access the page next time. 

Related Topics

Moodle.org Documentation