aem - 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:

<test
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/authoring/dialog/richtext"
   fieldLabel="Touch Ui Text"
   name="./test"
   renderReadOnly="{Boolean}true"/>

It worked.But I have to add styles as a plugin in my mutifield text component which I am unable to do. How to add the plugins just like we add rte plugins in classic ui? I need to provide various styles in the rich text editor as part of multifield.

Thanks for helping!

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:

<text jcr:primaryType="nt:unstructured"
      name="./text"
      sling:resourceType="cq/gui/components/authoring/dialog/richtext"
      useFixedInlineToolbar="true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="*"/>
        <justify jcr:primaryType="nt:unstructured" features="*"/>
        <lists jcr:primaryType="nt:unstructured" features="*"/>
        <links jcr:primaryType="nt:unstructured" features="*"/>
        <styles jcr:primaryType="nt:unstructured" features="styles">
            <styles jcr:primaryType="cq:WidgetCollection">
                <warning jcr:primaryType="nt:unstructured" cssName="warning" text="Warning"/>
                <note jcr:primaryType="nt:unstructured" cssName="note" text="Note"/>
                <header jcr:primaryType="nt:unstructured" cssName="header" text="Header"/>
            </styles>
        </styles>
        <paraformat jcr:primaryType="nt:unstructured" features="*">
            <formats jcr:primaryType="cq:WidgetCollection">
                <paragraph jcr:primaryType="nt:unstructured" description="Paragraph" tag="p"/>
                <heading1 jcr:primaryType="nt:unstructured" description="Heading 1" tag="h1"/>
            </formats>
        </paraformat>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured">
                <popovers jcr:primaryType="nt:unstructured">
                    <justify jcr:primaryType="nt:unstructured" ref="justify"/>
                    <lists jcr:primaryType="nt:unstructured" ref="lists"/>
                    <paraformat jcr:primaryType="nt:unstructured" items="paraformat:getFormats:paraformat-pulldown" ref="paraformat"/>
                    <styles jcr:primaryType="nt:unstructured" items="styles:getStyles:styles-pulldown" ref="styles"/>
                </popovers>
            </inline>
        </cui>
    </uiSettings>
</text>

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

Here's how it looks on the page: