Skip navigation
All Places > Blackboard Open LMS Community > Blog > 2019 > July

I've been playing around with the TinyMCE editor and the Atto Editor for a while and thought it might be useful to share some of my thoughts and findings. 

A little background

You may or may not have been using Open LMS/Moodle for a while so why not give a little history and context. For a number of years, Moodle was using the TinyMCE editor as the HTML editor in the platform. Eventually a custom HTML editor was developed in part to maintain more control over the development and bug fixing needed in the platform. Overall, there are some performance enhancements with Atto over TinyMCE, particularly in pages with multiple instances of the HTML editor. After a while,the TinyMCE editor stopped being formally supported but has still been included due to the large number of users of this older HTML editor. This means that sometimes weird behavior or issues that come up are actually related to the use of the TinyMCE editor. Atto has become the editor of choice and is the default in new installations; but many folks have some issues or confusion about it or are just plain unaware that it is around. 


Managing the tool bar

Atto starts in a more streamlined mode, with fewer options available in both collapsed and expanded mode. In part this is a design decision and in part it is part of a plan to encourage more web friendly and accessible content. The styles are little different overall and Atto does manage styles a bit differently than TinyMCE. We will check out some of the ways they are different, why, and what can be done about it. Both have admin control over what options show up in the tool bars, but most of us have just never used this power. 

Screenshot of the Admin Settings menu in the Text Editors in the Plugins list Screenshot of the Atto Text Editor settings in the Admin tools

When I am adding new buttons to the tool bar, I just copy the "shortname" from the list and paste it into the grouping that I want the button to show up in. For Example, I might add or move the underline button to the style1 grouping by adding a ", underline" immediately after the "italic" on that list. The groupings just help manage and collect buttons with a similar theme together. 



One of the most often singled out items is the lack of color choice in the text editor. Color is not an effective way to communicate importance because we do not all see colors and it is noise that a screen reader user will have turned off, so they will not be notified of this "importance" or information meant to convey in color. Importance should be communicated with headings and tags, not color. That said, if your life is incomplete without it, you can add color to the Atto editor choices. There are two buttons that an admin can add to the tool bar; fontcolor and morefontcolors. Screenshot of the morefontcolors custom color creation interface.

The fontcolor button adds a fixed set of color options while the morefontcolors adds a configurable menu of color choices with an option to allow the user to create a custom color using a color picker.


Adding Images

I have found that while the Atto editor is generally very accessible and responsive friendly, it has a few odd corners. One is in image handling. By default, the editor always requires a fixed size for images that are added. There is no option to leave the size to be unspecified. The result is that often times for a large image, the responsive behavior is limited by the fixed size scale. I usually add the image and then enter HTML mode and just remove the height and width tags. This is probably bad form, but I like the results much better, especially when using Snap and it's responsive classes. 

Where Atto does better than TinyMCE is in a very critical issue; the finding and linking to files. I have seen several issues come up with copying HTML content objects with embedded images and files breaking when the link was made in TinyMCE. If the content is re-created with Atto, the issue goes away. The TinyMCE editor just does not use the correct linking to images in the file repository.


Collapse behavior and HTML+

Some of us like to work in HTML in the editor, and if you are one you might like the HTML+ tool. It is included in the system as an option, and is designed to replace the HTML button. Just change the html entry in the buttons list to be htmlplus. It adds color coding to HTML tags to help identify open or malformed tags. 

You and your faculty might also prefer to always have the editor open fully rather than have a collapse/expand behavior. An admin can remove the collapse option by removing the line "collapse = collapse" from the button line up in Atto. This will force the tool to just load open and not hide options under the collapsed space. 



What have you found with the Atto editor? What is your favorite feature in one that you can't seem to find in the other?