Adding styles in rich text Touch ui multifield

Question

I was trying to create a multifield touch ui text component in AEM 6.2. I created it by adding a field with the following resource type:

Answer 1

It appears the option to use custom styles in the Rich Text Editor was removed in Touch UI, as per the AEM 6.0 documentation.

The following plugin/feature combinations are not supported with the touch-optimized UI:

• edit
• image
• sourceedit
• styles
• table

Thankfully, they're back in AEM 6.2. I'm not sure about 6.1, they're probably also supported.

The documentation for AEM 6.2 describes the steps necessary to enable the Styles RTE Plugin. It took me a lot of reading but I managed to get the Styles plugin working.

In way of a TL;DR I can only say that the styles configuration follows the same format as in case of Classic UI and that you also need to pay attention to the uiSettings for your component as they drive the visibility of buttons in Touch UI.

Here's an example field configuration (rest of the cq:dialog omitted for brevity:

Note the elements in text/rtePlugins/styles and text/uiSettings/cui/inline/popovers/styles.

Here's how it looks on the page: