You are located in service: RWTHmoodle

Atto editor

Atto editor


The Atto text editor (sometimes referred to as the 'HTML editor') 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, description of an activity, writing an answer to a quiz question, or editing the content of many blocks.


1. Atto editor toolbar
2. Autosave
3. Image drag and drop
4. Detailed explanations of some functions of the Atto editor

1. Atto editor toolbar

The following screenshot shows the Atto editor toolbar available in RWTHmoodle:

Screenshot: Atto editor toolbar

Meaning of the symbols

Row 1

  • Icon "Show/hide advanced buttons" Show/hide advanced buttons
  • Icon "Paragraph styles" Paragraph styles
  • Icon "Bold" Bold
  • Icon "Italic" Italic
  • Icon "Underline" Underline
  • Icon "Create link" Create link
  • Icon "Unlink" Unlink
  • Icon "Insert or edit image" Insert or edit image
  • Icon "Insert or edit an audio/video file" Insert or edit an audio/video file
  • Icon "Unordered list" Unordered list
  • Icon "Ordered list" Ordered list
  • Icon "Table" Table
  • Icon "Insert H5P" Insert H5P
  • Icon "Emoji picker" Emoji picker


Row 2

  • Icon "Record audio" Record audio
  • Icon "Record video" Record video
  • Icon "Strikethrough" Strikethrough
  • Icon "Subscript" Subscript - i.a. suitable for the use of footnotes
  • Icon "Superscript" Superscript - i.a. suitable for the use of footnotes
  • Icon "Font family" Font family
  • Icon "Font size" Font size
  • Icon "More font background colors" More font background colors
  • Icon "More font colors" More font colors
  • Icon "Clear formatting" Clear formatting
  • Icon "Outdent"Icon "Indent" Outdent, Indent
  • Icon "Left align"Icon "Center"Icon "Right align" Left align, Center, Right align

Row 3


2. Autosave

Text typed into the Atto editor is automatically saved if you leave the page. If the user accidentally closes the tab or otherwise leaves the form without submitting, the text in the editor will be restored next time he opens the page. To discard a restored draft, the user needs to cancel the form or press the "Undo" button Icon "Undo" in the editor.

Screenshot Atto editor with note  "Draft saved"


3. Image drag and drop

If your browser allows it (and if it does, you will see a message at the top of your screen when the editing is on) you can add images into the Atto editor simply by dragging them from your computer:

Screenshot Atto editor with image drag and drop


4. Detailed explanations of some functions of the Atto editor

Icon "Create link" Create link

The "Create link" option allows you to create links to other websites or videos. Alternatively, you can use "Browse repositories..." to access various repositories (e.g. Opencast videos) via the File picker that contain files and, after selecting them, embed them directly in the text area.

Screenshot "Create link"

When using the Book activity, you can use this option to link chapters and images. For example, you can anchor links between different book chapters or reference figures in other book chapters. Linking tables and equations from different chapters, however, is not possible.


Icon "Record audio" Icon "Record video" Record audio and video

Add audio and video annotations to text, anywhere an Atto text editor is present. Using WebRTC technologies, all recording is done instantly in the browser. To start recording, click the "Start Recording" button:

Screenshot: Record audio, start recording

After recording, users can embed the annotation directly into the text they are currently editing. The recording will appear as an audio or video player in the published writing.



Audio files are saved in the OGG container file format. Since the Safari web browser does not support this format, audio files created using the "Record Audio" button cannot be played when using Safari. When using the Firefox and Google Chrome web browsers, however, files in the OGG container file format can be played on the maxOS and iOS Apple operating systems without any problems.

Icon "Manage files" Manage files

This functionality allows users to add, delete or overwrite files in the present text area. This makes it more convenient, for example, to quickly re-use images in a label or page. The first time a file is added, it is added from the usual repositories, for example, Upload a file. Afterward, the uploaded files become available for reuse in the same text area by clicking on the "Manage Files" Icon "Manage files" icon. The files uploaded to the repository can be downloaded via the Download Center. The files remain in the repository until they are manually removed from it. If you just remove files from the text area of the editor, they will still remain in the repository and will therefore also be downloaded via a file download. It is therefore advisable to remove files that are no longer required not only from the text area but also from the underlying repository.

Screenshot "Manage files" with display of files


Icon "Equation editor" Equation editor

When you click on it, an equation editor opens. With the help of this editor, mathematical formulas can be created very easily without having to know TeX notation.

Screenshot "Equation editor"


Icon "Matrix editor" Matrix editor

When you click on it, a matrix editor opens. With the help of this editor, you can create mathematical matrices very easily without having to know TeX notation.

Screenshot "Matrix editor"


Icon "Chemistry editor" Chemistry editor

If you click on it, the chemistry editor will open. With the help of this editor, chemical formulas can be created very easily without having to know TeX notation.

Screenshot "Chemistry editor"


Icon "Insert character" Insert character

If you click on the "Insert character" Icon "Insert character"icon, a wide range of common special characters will be available. Insert them by mouse click into the text area of the editor where the cursor is located.

Screenshot "Insert character"


Icon "Accessibility checker" Accessibility checker

One of the tools available in the text editor is an automated accessibility checker which checks for some common errors in the text. These are usually things in the way the text is constructed that can prevent all users from having equal access to information and functionality. The list of problems that the accessibility checker looks for is:

  •     Images with missing or empty alt text (unless they have the presentation role)
  •     The contrast of font color and background color 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

Icon "Screenreader helper" Screenreader helper

Screen readers basically treat a content editable region like a text box - which is wrong, because it can contain images, links, and more.
The screen reader helper provides additional information about the currently selected text (e.g. is it bold), as well as a listing of any images or links in the text.


For more information: 

last changed on 11/02/2022

How did this content help you?

GNU General Public License 3
This work is licensed under a GNU General Public License