By: Sarina Canelake and Jenna Makowski

With the recent release of Olive, the newest Open edX named release, comes some significant improvements to the text editing experience within what was formerly known as the “HTML Component”. With this new feature, it’s easier to add things to your text, such as:

  • images from your image gallery
  • special characters and symbols
  • Emoticons

Editing is also more streamlined, with new enhancements such as:

  • editing in full-screen mode
  • undo / redo actions
  • table authoring without going into HTML mode

Read on for a rundown of everything you need to know about the Text Component.

Updated Editor Overview

The visual above shows the updated Text component editor, which opens up in full-screen mode, allowing you to seamlessly build blocks with large amounts of content. It has a new toolbar that starts with undo (backwards arrow) and redo (forward arrow) actions, existing formatting options, text layout tools, and list and indentation controls. Additional details for the remaining tools are described below.

Adding Images

We have made it easier to reference existing files & uploads from your course in text components as shown in the visual below. You can search and sort all images as well as upload new images to your course as you are authoring a specific text component.

Special Characters

We have also introduced a way to include special characters into your text content, including mathematical and symbolic elements.

Emoticon Support

You can now also easily add emoticons into your text content, a small but visually obvious way to break up long stretches of text content. You can see the emoticon library tool referenced below.

Visual Table Editor

Another category of new tools we have added includes the addition of tables without needing to jump to the HTML editor. The table toolbar icon lets you drop in a table component:

Selecting a given cell of the table within the editor view lets you create, remove, or adjust rows and columns:

Dragging one of the table’s corners allows you to resize it:

The remaining two buttons on the toolbar are Clear Formatting and HTML Edit.

Clear Formatting allows you to highlight any amount of formatted text and revert its formatting. HTML Edit allows you to view the raw HTML of the Text Component; you may adjust the HTML directly, if you wish.

We hope this improved editor will speed up the content authoring process and enable you to create richer experiences for your learners!

 644 total views