ke38017

Atto editor: Can we add some more formatting options? Yes!

Blog Post created by ke38017 on Jun 27, 2018

Hi Community Members

 

I work in the Open Source Product Management team, based in Australia, and I have recently had a couple of questions about extending the formatting options in the Atto text editor, hence this post.

 

As you may be aware the Atto text editor is the default editor for Moodle. It was designed to help content creators in Moodle create more accessible content.  In theory the course design / content formatting is taken care of by the site branding and theme, however we know in practice many clients enable / require additional features to assist course creators to achieve their desired content display.

 

To make it easier to create accessible content, by default the Atto editor doesn’t provide a lot of options for formatting. 

 

A note from Moodle HQ: “Background colour / Font colour

While these are very popular plugins, there are downsides to enabling their use on a site. Firstly - user specified colours may conflict visually with the site colours chosen by the theme designer. Even if the colours of the content do not conflict with the colours of the current theme, if the theme is changed in future, or the content is reused on a different site conflicts may be introduced. There are 2 possible types of conflicts, the first is just a visually unappealing combination of colours, the second is a combination of colours that may produce text that is hard to read for some people. It is preferable if the theme designer uses some interesting colours that meet the accessibility standards required for the site in the theme for the site, and the person creating the content simply uses the proper heading levels (for example) to make use of those styles.”

From: Moodle HQ - Atto Text Editor

 

After saying that, the recent questions have been around providing access to font colours and customising table formatting.  The following provides an overview of some of the options we have to provide additional formatting features in the Atto editor.

 

MR Atto additional plugins

The Atto editor comes with core features, and can be extended with additional plugins.  Moodlerooms currently supports the following additional Atto plugins, these plugins are automatically enabled on your Moodlerooms site:

  • Chemistry editor - Edit chemistry equations using the mhchem extension to the MathJax or TeX filter. Useful for full and ionic equations, isotopes, equilibrium reactions, thermochemistry and reaction kinetics. Includes a periodic table of element symbols.
  • File Drag & Drop - This plugin for Moodle's Atto WYSIWYG editor lets you drag any file into Atto so you can upload them into Moodle and add a link to the file within the Atto content.
  • Word count - Simple word count plugin for Atto.
  • HTML+ - The htmlplus plugin provides a version of the HTML plugin with both syntax highlighting and code beautification. It also provides indentation support.
  • More font colours - This is intended to be a replacement for the core fontcolor Atto plugin, allowing the Moodle administrator to freely define a set of colours that can be used by users. If allowed by the administrator, users can also use a colour picker to chose any possible colour.

Lets take a look at how we would enable users to format tables, and choose a font colour, in the Atto editor. 

 

Are the table formatting features enabled?

 

When you go to any text editing screen you will see the Atto editor tools, expand the toolbar and click on the table tool, as shown below with the default settings.

Image of create table screen without the formatting features enabled.

 

If the table formatting features are enabled, the Create table dialog will include additional formatting tools, as shown below.

Image of create table screen with formatting features enabled.

 

To enable table formatting features:

Role: Site administrator

  • Site Administration > Plugins > Text Editors
  • Atto HTML editor > Table settings
  • Enable all the features you would like to make available.
  • Save changes.

While you can’t currently extend the colours that are provided for the table border and background colours, you can switch to HTML view (</>) in the Atto editor, and modify the colours manually, look out for the following two lines in the HTML, any user who can access the editor can edit the content using the HTML editor view:

 

Table border HTML example:

<td style="border-width: 1px; border-style: solid; border-color: rgb(125, 159, 211);"></td>

 

Table background HTML example:

<table style="background-color: rgb(239, 69, 64); width: 80%">

 

Enable font colour selection tool

The More font colours plugin is an additional tool which provides a tool for font colours which can be added to the Atto toolbar, and additional colours can specified by the site administrator.

 

To add More font colours to the Atto toolbar:

Role: Site administrator

  • Site Administration > Plugins > Text Editors
  • Atto HTML editor > Atto toolbar settings
  • Toolbar config
  • Add morefontcolors to the tools eg style1 = title, bold, italic, hr, clear, morefontcolors
  • Save changes

Example of Atto toolbar configuration.

 

Image of an example of the Atto Toolbar configuration.

 

To add more colours to the “More font colours” drop down:

Role: Site administrator

  • Site Administration > Plugins > Text Editors
  • Atto HTML editor > More font colors
  • Add to the list of available colours
  • Save changes

 

NOTE: It is also possible for you to enable “allow custom colours” from this screen, which will allows users to select their own colour.

 

You will now see the font colour tool, selected below has been added to your Atto editor toolbar. In the below example, allow custom colours has been enabled.

 

Image of Atto editor showing the font colour tool.

 

Switching editors

While Atto is the default editor you can allow users to choose their preferred editor.  Currently you can switch to the previous editor, TinyMCE editor, which has more formatting options, including table options for selecting the background colour from a colour picker in the table editing tools.  Note this editor is not core for Moodle and may or may not be supported long term.  Moodlerooms recommends and prioritises fixes for the Atto editor.   However this does not have any impact on content created with this editor, and you can freely switch editors without loosing any saved content.

 

A word on accessible content, accessibility issues often come from user created content. The more we apply custom formatting and change the appearance of elements, the better our personal knowledge and commitment to creating accessible content needs to be. In my experience there is a balance between control and responsibility – with greater control comes greater responsibility!

 

Interested in more accessibility support, have you heard about Ally?  Blackboard Ally is a revolutionary product that integrates seamlessly into the Learning Management System and focuses on making digital course content more accessible.

 

I’d love to hear from you…

Have you customised your Atto editor?

Do you have any tips and tricks for creating accessible content?

Share your tips and tricks!

 

I look forward to hearing your stories, challenges and successes.

Kim

 

Kim Edgar

Senior Product Manager, Open Source

Outcomes