Improved Studio Editing in Olive

Improved Studio Editing in Olive#

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#

../../../_images/editor1.png

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.

../../../_images/editor2.png

Special Characters#

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

../../../_images/editor3.png

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.

../../../_images/editor4.png

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:

../../../_images/editor5.png

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

../../../_images/editor6.png

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

../../../_images/editor7.png

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

../../../_images/editor8.png

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!

Maintenance chart

Review Date

Working Group Reviewer

Release

Test situation

2025-04-28

Docs WG

Teak

Deprecated: This is no longer the current release
Contents