Using a Text/HTML Editor

Home > Welcome to Moodle > Editing Capabilities in Moodle > Using a Text/HTML Editor

The Text Editor has many tools that assist with entering content into your course. Many of its icons and functions should be familiar to anyone who uses a word processor. You will see the text editor when describing an activity, posting to a forum, writing an answer to a quiz question, adding feedback while grading, or editing the content.

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

NOTE: Hover your mouse over each button to see what the button will do. A tool-tip will pop up with informative text.

This tool allows you to format your text easily without knowledge of HTML.

Basic

Basic Text Editing Tools

The first set of buttons on the text editor are for formatting basic text. They are key to making content accessible to a screen reader and to ensure a consistent look throughout your course content. They can also be used to organize and identify information.

You should use these three buttons almost exclusively when creating content for your courses.

Paragraph Styles

The paragraph styles drop-down menu changes the format for a block of text. Paragraph is the default format, but headings and other formatting can be applied to organize or identify specific content. This makes the text easier to follow and accessible.

Appearance:

Unordered List

The unordered list button creates a bulleted list. You can create an unordered list from scratch or apply the style to existing lines of selected text.

NOTE: You need to use the indent button to create a secondary list, and the outdent button to return to the top level.

Appearance:

First Item
Second Item
- Secondary List of Second Item
Third Item

Ordered List

The Ordered list button creates a numbered list. You can create a numbered list from scratch or apply the style to existing lines of selected text.

NOTE: You need to use the indent button to create a secondary list, and the outdent button to return to the top level.

Appearance:

First Item
Second Item
1. Secondary List of Second Item
Third Item

Linking to Outside Resources

The second set of buttons on the text editor are used to create and delete links to pages or files outside your Moodle course.

To auto-link to activities and resources within your own course, type the activity name exactly as it appears in Moodle and Moodle will auto-link to that item by default.

Link

The Link button creates or modifies a link to an external webpage or file. Select the text you would like to make the link and click on the Link button to open the Create link pop-up.

To Add a Link to a Webpage:

Copy the URL from the address bar of your browser for the webpage you want to link to.
Paste the URL into into the text box below Enter a URL
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 Link to a File:

Click the Browse Repositories button
From the File Picker window select the location of your file–most often it will be Upload a file.
Click Choose File and browse for the file you want to upload.

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.

Unlink

The Unlink button will remove a link or allow you to modify which content is linked.

To remove PART of a link

Select the content you no longer want to be a part of the 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 on the text editor are used to add multimedia like images, video, and interactive content to your Moodle course.

Insert Image

The Insert or edit image allows you insert a new image or edit an existing image in your content.

NOTE: Some images are large and may take a long time to upload.

Insert Image:

Click into the location you want your image placed.
NOTE: If you want text to wrap around the image click where you want the TOP of the image to align with.
Click the Insert or edit image button
Click the Browse repositories button
From the File Picker window select the location of your file–most often it will be Upload a file.
Click Choose File and browse for the image you want to use.
Provide a description for your image to make your image ADA accessible. See the Applying Alt Text To Images In Moodle article for help in understanding whether you need to provide a description or if you can check This image is decorative only.
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.
Resize the image as necessary by altering one of the dimensions. It is strongly recommended you check the Auto size check-box to avoid distorting the image.
Click the Save image button.

If you need to modify the image alt-text, size or alignment you can select the image and then click on the Insert or edit image button again.

Appearance:

Embed Kaltura Media

The Embed Kaltura Media button embeds a video that has been uploaded or recorded using Kaltura.

NOTE: If you haven’t already added your video to Kaltura you can use +Add New button to upload or record your video first in the pop-up window.

Once you’ve found the desired video click the </> Embed button to the right of the video.

Appearance:

Insert H5P

The Insert H5P button embeds preexisting H5P content, created by you or someone else, to your course. H5P is an open source interactive media tool.

NOTE: H5P content that is added through the text editor cannot be connected to the gradebook or created from scratch.

H5P content will vary drastically in appearance based on the type of content created/imported. The content can range from flash cards, interactive time-line, crossword and more.

Appearance:

Manage Embedded Files

The Manage embedded files button allows you to add, remove, and override files relevant to the resource or activity. A file that has been previously uploaded and removed from the activity or resource can still be found here to re-reference, remove or modify.

The Manage Embedded files pop-up window displays all files uploaded to this activity or resource under Manage Files. The Unused file section displays the files that Moodle does not detect as being currently used in the activity or resource. You can remove unused files to keep your course size smaller.

Appearance:

atto manage files interface window file manager unused

Quick-Record

The fourth set of buttons on the Atto text editor are for Quick-recording audio or video responses (maximum length is 5 min).

Record Audio

The record audio button allows you to record and insert an audio recording (up to 5 minutes) using a computer’s microphone.

You will be able to preview your recording before you attach it to your content. When you attach it to the content an interactive player will appear inline with any other content.

Appearance:

Record Video

The Record video button will allow you to record a video (up to 5 minutes) using a computer or phone webcam.

NOTE: If you need to do a screen recording or create a video longer than 5 minutes you can use Kaltura to create your video.

You will be able to preview your recording before you attach it to your content. When you attach it to the content an interactive player will appear inline with any other content.

Appearance:

Accessibility

Accessibility Tools

The fifth set of buttons on the text editor can be used to help make your content more accessible.

Screenreader Helper

The Screenreader helper button allows you to see the HTML tags (P for Paragraph, H3 for small Heading, OL for Ordered List, etc.) that are in the content you have highlighted with your cursor or the line you are actively on. It will also show the links and images in the text editor.

Appearance:

Screenreader helper interface window links atto

Clear Formatting

The Clear formatting button strips away styling formatting. This will clean your content leaving the basic formatting. This will make the content more accessible.

To use you will highlight the text and click the Clear formatting button.

Appearance:

Before:

After:

HTML

The HTML button shows you the HTML/source code. You will be able to see the markup code and tags that make the content look the way it does.

If you know HTML this would allow you to modify the content using this window. The text editor will attempt to color-code, indent, and number lines for HTML and CSS shown here automatically for easier editing, but if you are not familiar with HTML we do not recommend you edit your content in this view.

Appearance:

Toggle full screen

The Toggle full screen button expands the text editor to take up the entire browser window or tab. This will provide additional space to create or edit content.

To return to the normal editing page click the Toggle full screen button again.

Appearance:

HTML Accessibility Report

The HTML Accessibility Report button reviews content in the text editor and identify issues such as:

Images with missing or empty ALT text.
Insufficient contrast between font color and background color.
Tables missing captions.

A pop up window the the Accessibility Report provided by YuJa Panorama will appear to the right with an explanation of the issues it detects. It will also provide a button that will explains How To Fix the issue, and a button to help Fix issue.

Appearance:

ATTO Text Editor Panorama Accessibility Report

Emphasis

Text Formatting and Emphasis

The sixth set of buttons on the text editor are text formatting options (bold, italic, underline, and strikethrough) that can be used to emphasize text.

These tools only work for sighted users trying to quickly scan a document and should not be used in place of headings.

Bold

The Bold button makes the selected text bolded. This is meant to provide emphasis on text and can provide an easier visual when scanning for key words.

NOTE: 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

The italics button makes the selected text italicized. This can have 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.

NOTE: Same as pressing Ctrl + i on your keyboard

Appearance:

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

Underline

The underline button makes the selected text underlined. This can be used to emphasize text but it is also common practice to use underlined text to indicate a link to another page or website. For this reason you should be cautious when choosing to use this text format for emphasis.

NOTE: 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

The strike through button makes the selected text appear to be crossed out. This is to indicate the suggested removal of the text without deleting the content.

Appearance:

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

Colors

Text Colors

The seventh set of buttons on the text editor are for applying text color formats. Text color formats can be used to emphasize text, but it is important to consider a few things when using text color formatting to make your content accessible.

When using colors make sure you are checking contrast between the font color and the background color.
Screen readers cannot detect colors so it is important that you do not use color as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Font Color

The Font Color button makes the selected text a different color.

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.

Appearance:

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

Text Background Color

The Background color button adds a background color to the selected text.

Appearance:

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

Layout

Paragraph Formatting (Layout)

Paragraph formatting controls the alignment and spacing of text, which can help ensure that the document is professional and easy to read.

Left align

The left align button aligns the text to 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

The center align button aligns the text in 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

The right align button aligns the text to 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)

The outdent button removes an existing indent. When text or a list is indented this will reduce the indent or move it to the left.

Indent

The indent button moves text or list item to the right. This is typically used to create hierarchy to a document or to create a secondary list in an ordered or unordered list.

Appearance:

This item is not indented.

This item is indented twice.

This item is indented once.

Horizontal Rule

The Horizontal rule button adds a horizontal line that will span the entire content area. This is to provide a visual break in information.

To make your content accessible you should use this instead of multiple hyphen/dash (-), underscore (_), or other characters to create this break. This is because a screen reader will read the names of those characters one-at-a-time. (Example: “—–” would be read as “hyphen hyphen hyphen hyphen hyphen”)

Appearance:

Atto text editor Horizontal rule example

Specialized

Specialized Formatting & Characters

These last set of buttons buttons are to perform some specialized formatting that is not used often. They will likely be used for some specialized fields like math, science, and some language courses.

Subscript

The Subscript button adds smaller text below the baseline. This is commonly used for chemical formulas and some mathematics.

Appearance:

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

Superscript

The Superscript button adds smaller text above the baseline. This 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

The insert character button adds special characters to your text. This is commonly used for foreign languages or other symbols not included on a basic keyboard.

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 from the pop-up window that appears.

Appearance:

Equation Editor

The Equation editor button inserts formatted math equations into your content. The Equation Editor will to convert TeX code to an image that is accessible to a number of screen readers.

To add an equation:

Click the location you want to place the equation.
Click the Equation editor button.
Construct your equation using the pop-up window that appears. There will be multiple tabs at the top for different types of symbols: Operators, Arrows, Greek Symbols, and Advanced. You will then use the keyboard and the buttons for the available symbols to create your equation visible in the Equation preview at the bottom. It will create the editable TeX code in the Edit equation using TeX in the center.
Once the Equation preview displays the correct equation click the Save Equation button to add the equation to your content.

Appearance:

Insert/Edit Table

The Table button adds a table to your content. Tables are built for displaying information in an organized way. 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.

Elements to include in your table for accessibility:

A caption on a table should describe the table’s data/relevance of the table to your other content.
Define headers on columns. This will be the top row of your table.
Define headers on rows. This will be the left-most column of your table.

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