AEM 6.1: Enable Rich text editor (RTE) plugins on Touch UI

Question

for classic UI we can easily add the plugins inside rteplugins tag, Adobe built a great example on their Geometrix-Outdoor project:

        <summary
            jcr:primaryType="cq:Widget"
            fieldLabel="Summary"
            name="./summary"
            xtype="richtext">
            <rtePlugins jcr:primaryType="nt:unstructured">
                <table
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <format
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <lists
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <justify
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <edit
                    jcr:primaryType="nt:unstructured"
                    features="[paste-wordhtml]"/>
                <findreplace
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <paraformat
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <subsuperscript
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <misctools
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <links
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <spellcheck
                    jcr:primaryType="nt:unstructured"
                    features="*"
                    invalidStyle="background-color: #ffdddd;"/>
                <undo
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <image
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
            </rtePlugins>
        </summary>

However we can't apply the same thing on Touch UI environment, they also did an example on Geometrix-Outdoor, but the plugins do not display fully functional:

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

Is there anyway to make the plugins on TouchUi display as Classic UI ?

Answer 1

This is a sample dialog.xml (you need both dialog and _cq_dialog for RTE in AEM6.1)

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
helpPath="en/cq/current/wcm/default_components.html#Text"
title="Text"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
    <tab1
        jcr:primaryType="cq:Widget"
        anchor="100%"
        title="Text"
        xtype="panel">
        <items jcr:primaryType="cq:WidgetCollection">
            <text
                jcr:primaryType="cq:Widget"
                hideLabel="{Boolean}true"
                name="./text"
                useFixedInlineToolbar="{Boolean}true"
                xtype="richtext">
                <rtePlugins jcr:primaryType="nt:unstructured">
                    <subsuperscript
                        jcr:primaryType="nt:unstructured"
                        features="*"/>
                    <paraformat
                        jcr:primaryType="nt:unstructured"
                        features="*">
                        <formats jcr:primaryType="cq:WidgetCollection">
                            <p
                                jcr:primaryType="nt:unstructured"
                                description="Paragraph"
                                tag="p"/>
                            <h2
                                jcr:primaryType="nt:unstructured"
                                description="Header 2"
                                tag="h2"/>
                            <h3
                                jcr:primaryType="nt:unstructured"
                                description="Header 3"
                                tag="h3"/>
                            <h4
                                jcr:primaryType="nt:unstructured"
                                description="Header 4"
                                tag="h4"/>
                        </formats>
                    </paraformat>
                    <misctools
                        jcr:primaryType="nt:unstructured"
                        features="specialchars">
                        <specialCharsConfig jcr:primaryType="nt:unstructured">
                            <chars jcr:primaryType="nt:unstructured">
                                <copyright
                                    jcr:primaryType="nt:unstructured"
                                    entity="©"/>
                                <trademark
                                    jcr:primaryType="nt:unstructured"
                                    entity="™"/>
                                <registered
                                    jcr:primaryType="nt:unstructured"
                                    entity="®"/>
                                <emDash
                                    jcr:primaryType="nt:unstructured"
                                    entity="—"/>
                                <pound
                                    jcr:primaryType="nt:unstructured"
                                    entity="£"/>
                                <nbsp
                                    jcr:primaryType="nt:unstructured"
                                    entity=" "/>
                            </chars>
                        </specialCharsConfig>
                    </misctools>
                    <links jcr:primaryType="nt:unstructured">
                        <linkDialogConfig
                            jcr:primaryType="nt:unstructured"
                            height="{Long}316">
                            <linkAttributes jcr:primaryType="cq:WidgetCollection">
                                <linkAdvanced
                                    jcr:primaryType="cq:Widget"
                                    collapsed="{Boolean}true"
                                    collapsible="{Boolean}true"
                                    inputValue="advanced"
                                    name="./linkdialog/cq:adhocLinkTrackingTab"
                                    title="Link tracking"
                                    xtype="dialogfieldset">
                                    <items jcr:primaryType="cq:WidgetCollection">
                                        <enable
                                            jcr:primaryType="nt:unstructured"
                                            attribute="enabletracking"
                                            fieldDescription="override analytics framework settings"
                                            fieldLabel="Custom link tracking"
                                            name="./linkdialog/cq:adhocLinkTrackingEnableTracking"
                                            xtype="checkbox">
                                            <listeners
                                                jcr:primaryType="nt:unstructured"
                                                check="function(component){var dlg=component.findParentByType('rtelinkdialog');dlg.enableSCFields(component.checked);}"/>
                                        </enable>
                                        <events
                                            jcr:primaryType="nt:unstructured"
                                            attribute="adhocevents"
                                            fieldDescription="e.g.: event2, event7"
                                            fieldLabel="Include SiteCatalyst events"
                                            name="./linkdialog/cq:adhocLinkTrackingEvents"
                                            xtype="textfield"/>
                                        <evars
                                            jcr:primaryType="nt:unstructured"
                                            attribute="adhocevars"
                                            fieldDescription="e.g.: eVar1: pagedata.url, prop4: 'const'"
                                            fieldLabel="Include SiteCatalyst variables"
                                            name="./linkdialog/cq:adhocLinkTrackingEvars"
                                            xtype="textfield"/>
                                    </items>
                                </linkAdvanced>
                            </linkAttributes>
                        </linkDialogConfig>
                    </links>
                    <edit
                        jcr:primaryType="nt:unstructured"
                        defaultPasteMode="plaintext"
                        features="[cut,copy,paste-plaintext]"
                        stripHtmlTags="{Boolean}true"/>
                    <spellcheck
                        jcr:primaryType="nt:unstructured"
                        features="*"/>
                    <findreplace
                        jcr:primaryType="nt:unstructured"
                        features="*"/>
                    <undo
                        jcr:primaryType="nt:unstructured"
                        features="*"/>
                    <format
                        jcr:primaryType="nt:unstructured"
                        features="[bold,italic]"/>
                    <lists
                        jcr:primaryType="nt:unstructured"
                        features="*"/>
                    <justify
                        jcr:primaryType="nt:unstructured"
                        features="*"/>
                    <styles
                        jcr:primaryType="nt:unstructured"
                        features="*">
                        <styles jcr:primaryType="cq:WidgetCollection">
                            <disclaimer
                                jcr:primaryType="nt:unstructured"
                                cssName="wysiwyg--disclaimer"
                                text="Disclaimer"/>
                            <quote
                                jcr:primaryType="nt:unstructured"
                                cssName="pull-quote component"
                                text="Quote"/>
                        </styles>
                    </styles>
                </rtePlugins>
                <uiSettings jcr:primaryType="nt:unstructured">
                    <cui jcr:primaryType="nt:unstructured">
                        <inline
                            jcr:primaryType="nt:unstructured"
                            toolbar="[links#modifylink,links#unlink,format#bold,format#italic,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,fullscreen#start,control#close,control#save]"/>
                        <fullscreen
                            jcr:primaryType="nt:unstructured"
                            toolbar="[links#modifylink,links#unlink,links#anchor,format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript,edit#cut,edit#copy,edit#paste-plaintext,findreplace#find,findreplace#replace,undo#undo,undo#redo,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,spellcheck#checktext,misctools#specialchars,#styles,#paraformat,fullscreen#start,control#close,control#save]">
                            <popovers jcr:primaryType="nt:unstructured">
                                <styles
                                    jcr:primaryType="nt:unstructured"
                                    items="styles:getStyles:styles-pulldown"
                                    ref="styles"/>
                                <paraformat
                                    jcr:primaryType="nt:unstructured"
                                    items="paraformat:getFormats:paraformat-pulldown"
                                    ref="paraformat"/>
                            </popovers>
                        </fullscreen>
                    </cui>
                </uiSettings>
            </text>
            <isRichTextFlag
                jcr:primaryType="cq:Widget"
                ignoreData="{Boolean}true"
                name="./textIsRich"
                value="true"
                xtype="hidden"/>
        </items>
    </tab1>
</items>

This is an example of _cq_dialog

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Configure rich text component"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="en/cq/current/wcm/default_components.html#Text">
    <content
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container">
    <layout
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
        margin="{Boolean}false"
        type="nav"/>
    <items jcr:primaryType="nt:unstructured">
        <column
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/container">
            <items jcr:primaryType="nt:unstructured">
                <text
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/form/textarea"
                    cols="{Long}2"
                    disabled="{Boolean}true"
                    fieldLabel="Body text"
                    name="./text"
                    rows="{Long}10"/>
            </items>
        </column>
    </items>
</content>

example text.html

<div data-sly-test="${(wcmmode.edit || wcmInit.isTouchAuthoring) && (!properties.text)}">
<div>Please edit this component.</div>
<sub>This text will only appear in Authoring Mode</sub>
</div>
<div data-sly-test="${properties.text}" data-sly-unwrap>
<p data-sly-use.text="text.js" data-sly-unwrap="${text.context == text.CONST.CONTEXT_HTML}" class="${text.cssClass}" data-emptytext="Rich Text">${text.text @ context=text.context}</p>
</div>

and test.js

"use strict";
/**
 * Text foundation component JS backing script
 */
use(["/apps/global/components/utils/AuthoringUtils.js"], function (AuthoringUtils) {

var CONST = {
    PROP_TEXT: "text",
    PROP_RICH_FORMAT: "textIsRich",
    CONTEXT_TEXT: "text",
    CONTEXT_HTML: "html"
};

var text = {};

// The actual text content
text.text = granite.resource.properties[CONST.PROP_TEXT]
        || "";

// Wether the text contains HTML or not
text.context = granite.resource.properties[CONST.PROP_RICH_FORMAT]
        ? CONST.CONTEXT_HTML : CONST.CONTEXT_TEXT

// Set up placeholder if empty
if (!text.text) {
    text.cssClass = AuthoringUtils.isTouch
            ? "cq-placeholder"
            : "cq-text-placeholder-ipe";
    text.context = CONST.CONTEXT_TEXT;

    // only dysplay placeholder in edit mode
    if (typeof wcmmode != "undefined" && wcmmode.isEdit()) {
        text.text = AuthoringUtils.isTouch
        ? ""
        : "Edit text";
    } else {
        text.text = "";
    }
}

// Adding the constants to the exposed API
text.CONST = CONST;

return text;

});

and lastly your editConfig

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:EditConfig">
<cq:inplaceEditing
    jcr:primaryType="cq:InplaceEditingConfig"
    active="{Boolean}true"
    configPath="../../dialog/items/tab1/items/text"
    editorType="text"/>
<cq:listeners
    jcr:primaryType="cq:EditListenersConfig"
    afteredit="REFRESH_PAGE"
    afterinsert="REFRESH_PAGE"/>

Answer 2

refer here for documentation https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/rich-text-editor.html

there's also a working example here CQ rich text field editor enable bold, italic and underline styles, plus bullet and numbered lists only