How to implement/configure Rich Text Editor in adobe cq(aem 6) touch UI?

Question

dialog conversion tool is not converting it properly. I have heard something along the lines of "in line editing" when it comes to RTE in touch UI. Do help. :)

Answer 1

As Shine mentioned the process seems to be enable the plugin for ClassicUI in the dialog.xml, and to add a configPath to the _cq_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" 
xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:xi="http://www.w3.org/2001/XInclude"
jcr:primaryType="cq:Dialog"
helpPath="en/cq/current/wcm/default_components.html#Text"
title="Text" xtype="tabpanel" 
height="{Long}450" 
width="{Long}700">
<!-- <tabpabel jcr:primaryType="cq:Widget" 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"
                xtype="richtext">
                <rtePlugins jcr:primaryType="nt:unstructured">
                <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" features="*" defaultPasteMode="plaintext"/>
                <spellcheck jcr:primaryType="nt:unstructured" features="*" />
                <image jcr:primaryType="nt:unstructured" features="*" />
                <paraformat jcr:primaryType="nt:unstructured" features="*">
                    <formats jcr:primaryType="cq:WidgetCollection">                
                         <p jcr:primaryType="nt:unstructured"
                             tag="p"
                             description="paragraph"/>
                         <h2 jcr:primaryType="nt:unstructured"
                             tag="h2"
                             description="Heading h2"/>  
                         <h3 jcr:primaryType="nt:unstructured"
                             tag="h3"
                             description="Sub-heading h3"/>  
                         <h4 jcr:primaryType="nt:unstructured"
                             tag="h4"
                             description="Sub-heading h4"/>  
                         <h5 jcr:primaryType="nt:unstructured"
                             tag="h5"
                             description="Sub-heading h5"/>  
                         <h6 jcr:primaryType="nt:unstructured"
                             tag="h6"
                             description="Sub-heading h6"/>  
                        </formats> 
                </paraformat>
            </rtePlugins>
            </text>
            <isRichTextFlag
                jcr:primaryType="cq:Widget"
                ignoreData="{Boolean}true"
                name="./textIsRich"
                value="true"
                xtype="hidden"/>
        </items>
    </tab1>

Then create the _cq_editConfig.xml with the configPath to the text configuration node. For me I used the absolute path. IDK why making relative (as suggested by Shine) didn't work

<?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="cq:EditConfig" >
    <cq:inplaceEditing jcr:primaryType="cq:InplaceEditingConfig" 
editorType="text" active="true" 
    configPath="/apps/your-site/wcm/foundation/components/test/dialog/items/tab1/items/text"/>      

While this may be used, I have found some plugins not working, such as image. Others are ok like parapgraph and edit (paste options)... more here http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__c4qo-hi_team_i_havec.html

Answer 2

for this particular component you would have made cq:dialog for touch UI and dialog for classic UI There is another node cq:editConfig create a node under it named cq:inplaceEditing with following properties: configPath-String- ../../dialog/items/items/tab1/items/richTextItem (this is the path for classic UI RTI)