SAP Fiori’s Rich Text Editor – What You See Is What You Get

This blog shines a light on SAP Fiori’s rich text editor (RTE) built with SAPUI5 controls.

As you might already know, the RTE is a control for data input and editing. ‘Rich’ comes from the complex formatting possibilities. As a ‘What You See Is What You Get’ editor (WYSIWYG), the content in edit mode closely resembles the final display mode.

Watch SAP Fiori’s RTE introducing itself and its actions.

More than just text

With the RTE, not only plain text, but also images, simple tables, or links, as well as formatted text can be submitted. Thus, the RTE is perfect to create articles, documentation, or for creating instructions.

For simple text input, use the control Text Area instead.

The rich text editor is available only in edit mode of the floorplan it is displayed in.

The SAP Fiori look’n’feel

The RTE has two main components: the toolbar and the content area. The content area is a box that contains the user’s input. The toolbar carries the main functions of the editor and calls for a closer look.

The RTE uses the third-party component TinyMCE. You can choose between two flavors of the RTE since SAPUI5 version 1.48. Below you can see the native toolbar and the SAP Fiori toolbar.

Native TinyMCE toolbar

Custom SAP Fiori toolbar

The self-explanatory actions contained in the toolbar are like those that we know from other text editing programs. They enable changing the font style, family, size, color, aligning and indenting text, creating lists and simple tables, and more. It is best to only offer actions that are relevant to your use-case in the toolbar.

Responsiveness

On smaller screens, the custom toolbar imitates the overflow behavior of the SAP Fiori toolbar. If the available actions don’t fit into the toolbar, they move into the dropdown menu of the overflow button.

Do you want to try out the RTE? Check it out in the SAPUI5 API Reference.

Much kudos to our RTE experts Veselina Petrova and Yordanka Petkova!