Using The Text/HTML Editor: Atto

Home > Welcome to Moodle > Editing Capabilities in Moodle > Using The Text/HTML Editor: Atto

The text editor (sometimes referred to as the ‘HTML editor’ or even ‘Atto’) has many icons to assist the user in entering content. Many of these icons and functions should be familiar to anyone who uses a word processor. Some examples of where you will see the text editor include editing section headings, describing an activity, writing an answer to a quiz question or editing the content of many blocks.

_{From Moodle.org Read More about the Atto Text editor}

NOTE: When in doubt of what a tool does hover your mouse over it–if you hold still, a tool-tip will pop-up with informative text!

A huge part of using the text editor is text. Without this tool no formatting could be easily applied by anyone except those with HTML and CSS knowledge. The buttons available on our Atto HTML editor have been arranged in order based on a mixture of frequency and accessibility.

Basic

Basic Text Editing Tools

The first set of buttons on the Atto text editor are the bare bones for formatting text content and should be used where applicable as they are key to content being accessible to a screen-reader and to ensure a consistent look for your course content. Use them to break up and identify information.

You should use these three buttons the most often when creating content for your courses.

Paragraph Styles

This drop-down allows you to change the way your Moodle course theme deals with a block of text. Paragraph is the default, but a number of headings and other formats can also be applied to break up or identify content so it’s easier to follow on a web site.

Appearance:

Unordered List

Created a bulleted list from scratch or apply it to existing lines of selected text.

Appearance:

First Item
Second Item
- Second Item’s First Child Item
Third Item

Ordered List

Create a numbered list from scratch or apply it to existing lines of selected text.

Appearance:

First Item
Second Item
1. Second Item’s First Child Item
Third Item

Linking to Outside Resources

The second set of buttons in the Atto text editor, these buttons are used to create and delete URL links to pages outside of your Moodle course or on other web sites completely.

To link to activities and resources in your own course you can type out the activity name exactly as entered and Moodle will auto-link to that item by default.

Create or Edit Link

To add a link select the text you want to make a link and hit the link button. A popup will appear you can select your link.

To Add A Web-Page in Link Form:

Copy the URL from the address bar of your browser (preferably from another window or tab you have open)
Paste the URL into into the text box below Enter a URL
SUGGESTED: You can choose to have this link open in a new tab or window by checking the Open in new window check-box.

To Add A File in Link Form:

Click the Browse Repositories button
From the File Picker window select the location you want to choose from–most often it will be Upload a file and from there you can browse for the file you wish to upload from your computer.

Appearance:

By default most links will be as some shade of blue in color and may or may not also be underlined. Hovering over a link with your mouse will turn the arrow into a pointing hand to indication interaction.

Remove Link

If a link has been set and is broken or you want it gone you can click or highlight the link in question and click this button. It will remove the link.

To remove only PART of a link

Highlight the content you no longer want to be a link
Click the Unlink button

To remove an entire link

Click anywhere in the linked content
Click the Unlink button

Multimedia

Multimedia (Images, Audio, Video, and Interactive Media)

The third set of buttons in the Atto text editor, these let you include other kinds of media like images, audio, video, and interactive content in your Moodle content.

Image

Insert a new picture from another location on the web or your own computer.

Some images are very large and will take a long time to upload and view.

Click into the location you want your image placed.
NOTE: if you want text to wrap around the image to any degree click what you want the TOP of the image to align with
Click the Image icon button
Click the Browse repositories… button
From the File Picker choose the image you want to upload–most often it will be Upload a file and from there you can browse for the image you wish to use from your computer
Provide a description for your image. If it isn’t a vital piece of content, you can check the Description not necessary button. See the Applying Alt Text To Images In Moodle article for help making your image ADA accessible.
Depending on how you want text to move around the image set your Alignment:
- Left or Right will have text wrap AROUND the image.
- Top, Middle and Bottom will place the image as part of the line of text and will center the image or text (whichever is smaller) according to your choice.
Click the Save image button to view your handiwork in the context of your content.

You can dictate the size of your image to make an image appear a little smaller.

It is strongly recommended you check the Auto size check-box to avoid distorting the image
It is not recommended that you upload a BIG image and make it substantially smaller as that can take a LONG time for students to load. You can use the picresize.com to quickly make any image smaller for the web.

Appearance:

Embed Kaltura Media

With the Embed Kaltura Media button students and faculty both are able to upload or record videos and post them on Moodle through an integration.

You can upload new content like a video file or record your own video on the spot with the + Add New button.

There may be some preexisting materials too, explore the My Media and Media Galleries tabs for videos associated with your Moodle account or a given Moodle course to reuse those assets.

Appearance:

Once you’ve found or uploaded the desired video you just need to click the associated </> Embed button to add the video player into your Moodle content.

Insert H5P (Interactive Media)

H5P is an open source interactive media tool. This button allows you to embed per-existing H5P content (created on other sites like WordPress or LMS).

H5P content can be added inlineto any Atto text area (though it will not and CANNOT be connected to the gradebook or created from scratch unless you add it as an Activity to your Moodle course).

Appearance:

H5P content will vary drastically in appearance based on the type of content created/imported but can range from a flash cards, an interactive time-line, an accordion for written content and more.

Content created by others but made available for your own use will have a Reuse or Embed link in the bottom-left corner of the activity window.

Manage Embedded Files

This interface allows you to interact with and remove files relevant to this resource or activity. If a file has been previously uploaded and removed from a page it can still be found here to re-reference, remove or modify–your choice.

You can also clean out unused files (they aren’t linked in the activity but do take up space) to keep your course’s footprint smaller.

Appearance:

The Manage Embedded files pop up window will list all files uploaded to this activity or resource regardless of if they are being used under Manage Files. Below that is the Unused file section where a list of those files that Moodle does not detect as being used in the content and should be safe for removal.

atto manage files interface window file manager unused

Quick-Record

Ideal for one-use quick audio or video responses (maximum length is 5 min)

Image

Record Audio

Insert a audio player with a recording of up to 5 minutes in length can be included, inline with any other content present. Video can only be recorded from computer’s microphone (if present) at this time.

Appearance:

You will be able to preview your recording before you attach it to your content. An interactive player will appear inline with any other content (if present).

Record Video

Insert a video player with a recording of up to 5 minutes in length can be included, inline with any other content present. Video can only be recorded from webcam (if present) at this time screen-recording will need to be done with alternative options like Zoom or Kaltura.

Appearance:

You will be able to preview your recording before you attach it to your content. An interactive player will appear inline with any other content (if present).

Accessibility

Accessibility (for content-creators and students!)

The fourth set of buttons in the Atto text editor, these tools to help make both your content and your experience creating that content with the Atto Text Editor more accessible.

Accessibility Checker

Like any automated system this isn’t perfect and may both miss things and identify issues that aren’t present. The Accessibility checker button will review content in the Atto text editor and try to identify issues such as:

Images with missing or empty alt text (unless they have the presentation role)
Contrast of font colour and background colour meets WCAG AA guidelines
Long blocks of text are sufficiently broken up into headings
All tables require captions
Tables should not contain merged cells as they are difficult to navigate with screen readers
All tables should contain row or column headers

_{List from Moodle.org Read More about the Accessibility Checker}

Appearance:

A pop up window the the Accessibility checker will appear with an explanation of what it detects and a numbered list of lines and/or HTML items it identifies potential trouble with.

Screen Reader Helper

The screenreader helper tool is helpful in that it allows you to look at your content more like how someone using a screenreader would experience it. The tool will look for content that you have highlighted with your cursor or whatever line the editor is actively on.

Links are listed for navigation and thus without surrounding context and identifies that a link that simply says “Click here” is nearly meaningless (consider using the name of an article or it’s purpose/action for the link instead!).
Images are reduced to their Description or “Alt text” (if present) and so you’re able to see how these assets would function to provide the student that information or if some additional tweaking is needed to make them usable.

Appearance:

The Screenreader helper pop up window will display the type of HTML tag is being used (P for Paragraph, H3 for small Heading, OL for Ordered List, etc.) as well as how links and images both appear to a screenreader.

You can click on each linked item in the pop up to highlight it in the editor so that you can easily make the needed modifications.

Screenreader helper interface window links atto

Clear Formatting

Used to strip away rogue formatting to keep your content clean and accessible. Highlight the text in question and click the Clear formatting button.

For more detailed information on use of this tool see our Troubleshooting: Inconsistent Text Formatting article for instructions.

Appearance:

Paste Special

Paste content from your clipboard (Learn more about how to copy and pasting content) that contains formatting brought over from the original such as font size, color, or other information and paste simplified versions of that content (ideal for a more consistent look regarding course content)

Same as pressing Shift + Ctrl + v on your keyboard.

Appearance:

Toggle full-screen

Clicking this button will expand the Atto text editor to take up the entire browser window or tab to provide additional space to create or edit content without being squeezed by the nav drawer or blocks as well as hide potential distractions that might be caused by other Moodle controls.

To close the interface and return to the normal Editing page click the Toggle full-screen button a second time.

Edit as HTML/Source

HTML

Sometimes you need to see the source code behind all the pretty content you’ve created. If you know any HTML this is how you would see the raw text behind the content of a resource or activity.

To embed a video from YouTube or similar use the Insert or edit an audio/video file button in the Multimedia section of this article.

Embedding another webpage in an iFrame

(This is not accessible for visually impaired students or those on small screens)
This will make sure the embedded page spans the whole area available, and will be 600 pixels tall so folks can see some of the content and scroll down the embedded page to read as needed.

Locate the webpage you wish to embed into a Moodle resource (such as a page or a book’s chapter) and copy its URL
Go back to Moodle and view the resource you wish to embed the page into; click the HTML button to convert the page to HTML
Paste the URL into the content area.
Copy and Paste the following BEFORE the URL (keeping it all on the same line):
```
<iframe src="
```

Copy and Paste the following AFTER the URL (keeping it all on the same line):

" width="99%" height='600'></iframe>

So your end result should look something like this:

<iframe src="http://www.clackamas.edu/CollegeInformation/" width="99%" height='600'></iframe>

Save your changes and check out the results.

Appearance:

The HTML view of the page will show you the markup code and tags that make the content look like they do to allow for fine tuning.

The Atto editor will attempt to color-code, indent, and number lines for HTML and CSS shown here automatically for easier editing by human eyes. It may also attempt to correct mistakes or remove potentially malicious code.

Emphasis

Text Formatting and Emphasis

The fifth set of buttons in the Atto text editor, bold, italic, underline, and strike-through are secondary formatting options used for different kinds of emphasis.

These tools are mostly ideal for sighted users trying to quickly scan a document and should not be used in place of headings. (You can apply them in addition to a heading, however, if you’d like to further emphasis that heading.)

Bold

Bolded text is meant to provide emphasis on text and can provide easier visual scanning for key words. This may also be referred to as adding weight to text.

Same as pressing Ctrl + b on your keyboard.

Appearance:

Bold text can help emphasize a remark, comment, or key words in text by darkening them and make them easier to spot.

Italic

Italicized text often has a specific meaning in addition to providing emphasis. According to Computer Hope some examples for when it’s appropriate to use italic text:

Use italic when you want to emphasize a word or phrase in a sentence.
When writing about the title of an album, book, magazine, movie, newspaper, podcast, speech, TV show, or work of art.
Italicize a word or phrase that is in a different language.

Same as pressing Ctrl + i on your keyboard

Appearance:

Italic will change the appearance of text to appear gently slanted to the right.

Underline

Text that has been underlined is commonly used to draw attention to to text but on the web common practice relies on underlined text to indicate an interactive link to another page or website.

NOTE: Use caution when using Underlined text, especially when pairing it with bright colors but especially shades of blue.

Same as pressing Ctrl + u on your keyboard

Appearance:

Text that has been underlined may be mistaken for links or hyperlinks to other parts of the internet but can add emphasis to text.

Strike-through

Applies ~~strike through~~ to selected text to indicate the removal of text or suggestions without outright deleting the content.

Appearance:

Strike-Through text will appear with a ~~horizontal line through the middle~~ of it as if it’s been crossed out.

Colors

Text Colors

Text Color

Applies the chosen or default color to selected text.

The available colors are:

First row: our CCC Brand colors
Second row: Original Atto colors (also available in Background Color)
Third, fourth & fifth rows: Colors that are NOT ambiguous to folks with color-blindness.

When in doubt, favor contrast and supplement colors with bold or italics so screen readers can also detect your emphasis or plainly state that you’ll be using font colors and what you’ll be using those colors for.

Appearance:

Text color is the digital equivalent of selecting a different colored pen such as from black ink to red ink.

Text Background Color

Applies the last chosen or default background color but may not be accessible to screen readers, if relying on background color for emphasis please plainly state that you’ll be using it and what you’ll be using it for.

Appearance:

Background color when applied to text is the digital equivalent of using a highlighter pen over other content.

Layout

Page & Paragraph Formatting (Layout)

Bootstrap Grid (Responsive Columns)

Left align

Moves text to hug the left side of the content area.

Appearance:

Text begins in the top-left corner of the page and will start new lines to the left.

Center Align

Moves text to the center of the content area.

Appearance:

Text begins in the center of the page and will start new lines while trying to keep the shape of the text centered and symmetrical.

Right Align

Moves text to hug the right side of the content area.

Appearance:

Text begins in the top-right corner of the page and will start new lines to the right.

Outdent (Remove Indent)

Removes an existing indent where applicable.
When text or a list is indented this will reduce the indent or move it to the left one unit.

Indent

Used to move a block of text or a list item to the right. Often used to better add hierarchy to a document. This can also be applied to lists to create sub-lists.

Appearance:

This item is not indented.

This item is indented twice.

This item is indented once.

Horizontal Rule

This button will add a horizontal line that will automatically span the entire available content area (like a column or the whole page) providing a visual break in information of any sort.

This should be used instead of any number of hyphen/dash (-), underscore (_), or other characters as a screen reader will literally read the names of those characters one-at-a-time. (Example: “—–” would be read as “hyphen hyphen hyphen hyphen hyphen”)

Appearance:

Specialized

Specialized Formatting & Characters

These buttons are not likely to be used by most folks but are vital for some specialized fields like math, science, and some language courses.

Subscript

Subscript (text below baseline) is not as commonly used as superscript but still has it’s uses for chemical formulas and some mathematics.

Appearance:

Subscript text appears _{smaller in size and below the baseline} of the surrounding text.

Superscript

Superscript (text above baseline) is commonly used to indicate exponents in math, the presence of footnotes in writing, and the charges of ions and subatomic particles in chemistry.

Appearance:

Superscript text appears ^{smaller in size and above the baseline} of the surrounding text.

Insert Character

Use this tool when you need a special character for foreign languages or other symbols not included in a basic keyboard layout without having to memorize the sequence of keys to otherwise type the character.

To add a special character:

Click the location you want to place the special character
Click the Insert Character button
Click on the desired character’s button

Appearance:

A pop-up window displaying many available special characters to choose from will appear.

Equation Editor

For adding formatted math equations for maximum clarity/ideal layout without having to draw them by hand, use the Equation Editor to convert TeX code to an automatically generated image that is accessible to a number of screen readers.

Appearance:

A popup window for the Equation editor will appear with multiple tabs at the top for different types of symbols: Operators, Arrows, Greek Symbols, and Advanced.
In the middle of the window that are buttons with the available symbols, and below that is the editable TeX interface to assemble the code.
At the bottom of the window a preview will appear of the generated TeX code as it will appear and the Save Equation button.

Insert/Edit Table

In the Atto text editor, tables are built for displaying information–not aesthetic purposes. If you have a graphical representation of data (i.e. a pie graph), consider also offering a table of the same data to help automated screen readers for ADA accessibility purposes.

A Caption on a table should describe the table’s data/relevance of the table to your other content.

Define headers on Columns will make the top row of your table the headings of a set of information.

Define headers on Rows will make the left-most column of your table the headings of a set of information.

Define headers on Both will set both the top and left-most rows as headings.

Appearance:

A pop-up window will appear asking for basic table settings like Caption, where to define headers, and the number of rows and columns needed.

View Related Articles

Troubleshooting: Inconsistent Text Formatting

Atto can get a little overzealous in applying formatting that is copied or dragged into the editor, especially in the Chrome Web Browser. This is most noticeable in f...