You are located in service: RWTHmoodle

Atto editor

Atto editor

Kurzinformation

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.


 Detailinformation
 

Table of Contents

  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:

The screenshot shows the text editor (Atto) with toolbar. You can see a multiline editor window. Above it is a block with four lines of icons.

The symbols in the toolbar have the following meaning:

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 "Unordered list" Unordered list
  • Icon "Ordered list" Ordered list
  • 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 "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
 

Row 3

 

Row 4

 

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.
 

The screenshot shows the Atto editor featuring a toolbar with icons and a text area with a Lorem ipsum text in it. Below a message shows "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:

The screenshot shows the Atto editor featuring a toolbar with icons and a text area with a Lorem ipsum text in it. In the lower left area a small image is floating, have a small "Move" text attached to it. Dropped in the text area next to the text the same image is enlarged.

 

4. Detailed explanations of some functions of the Atto editor
 

Icon "Create link" 4.1. 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.

The screenshot shows the "Create link" dialogue. On the right side next to the headline "Create link" a small cross icon can be used to close the dialogue. Below a text field called "Enter a URL" has a checkbox "Open in new window" below and the button "Browse repository" to the right. The button "Create link" is placed below.

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" 4.2. 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:

The screenshot shows the "Record audio" dialogue with the "Start recording" button and a cancel button in the top right corner (cross shaped).

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.
 

 

Note

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

The screenshot shows the "Manage files" dialogue. In the "File manager" area it shows a list of two files, each with a checkbox, its name, the date when it was last modified, the size and the type, "Video file (MP4)" for both. A line of icons allows to create a file, create a folder, download or delete a file. Three more icons allow switching how the files are displayed, as icons, in a list, or in a folder structure. Below this list there ist a second list, "Unused files". A text reads "The following embedded files are not used in the text area:", with two file names together with a checkbox below. At the bottom, there is a button called "Delete selected files".

 

Icon "Equation editor" 4.4. 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.

The screenshot shows the "Equation editor". It has a row of different tabs, "Operators", "Arrows", "Greek symbols", and "Advanced". The content of every tab, on display is the "Operators" tab, shows several rows of symbols as buttons. Below the buttons there is a field titled "Edit equation using TeX", which is empty on the screenshot. The last element is the "Equation preview" with an arrow displayed and the text "An arrow indicates the position that new elements from the element library will be inserted" below.

 

Icon "Matrix editor" 4.5. 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. However, you can also write LaTeX code directly in the editor. This will be rendered to formulas via MathJax.

The screenshot shows the "Matrix editor". It has a row of different tabs, "Brackets", "Smaller", "Larger", "1xn 2xn", "3xn", "mxn", "Small 1xn 2xn", "Small 3xn mxn", and "Arrays". The content of every tab, on display is the "Brackets" tab, shows several rows of symbols as buttons. Below the buttons there is a field titled "Edit matrix using TeX", which is empty on the screenshot. The next element is the "Matrix preview" with an arrow displayed and the text "An arrow indicates the position that new elements from the element library will be inserted" below. The "Save matrix" button is at the bottom of the screen".

 

Icon "Chemistry editor" 4.6. 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. However, you can also write chemical formulas directly as LaTeX code in the editor. RWTHmoodle uses MathJax for rendering the formulas, extended by the mhchem package.

The screenshot shows the "Chemistry editor". It has a row of different tabs, "Formulae", "Symbols & units", "Bonds & arrows", "Greek", "Italic", "H-Cn", and "La-Lu & Ac-Lr". The content of every tab, on display is the "Formulae" tab, shows several rows of symbols as buttons. Below the buttons there is a field titled "Edit chemistry using TeX mhchem", which is empty on the screenshot. The next element is the "Chemistry preview" with an arrow displayed and the text "An arrow indicates the position that new elements from the element library will be inserted" below. The "Save chemistry" button is at the bottom of the screen".

 

Icon "Insert character" 4.7. 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.

The screenshot shows the "Insert character" window. 211 buttons with special characters are arranged in rows of ten below each other.

 

Icon "Accessibility checker" 4.8. 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

In addition to this editor tool, you can also check other HTML-based content for accessibility in RWTHmoodle using the "Check Accessibility" block.

Icon "Screenreader helper" 4.9. 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.
 


 Zusatzinformation

For more information: 

last changed on 10/25/2023

How did this content help you?

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