AEM 6.1 Touch UI Component Inplace editing

[Akanksha_Pratih]

I have created a text-image component using sightly, to be used in touch UI. Need Inplace editing functionality for the same.

Added editconfig with inplaceEditing node but its not working for touch UI and working for classic UI.

Compared with OOB textimage component, there I'm able to do inplace editing and one edit pencil is also visible on component toolbar.

Have both dialog and cq: dialog with proper fields as well. Not able to find what is the issue with my component.

Please help

[Hemant_arora]

Make sure you have editorType="text" or editorType="textImage" property added to the inlineEditing node.

Refer to xml below:

<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"
    cq:actions="[text:Text/Image,-,EDIT,DELETE]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="text">
        <config jcr:primaryType="nt:unstructured">
            <rtePlugins jcr:primaryType="nt:unstructured">
                <subsuperscript
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
            </rtePlugins>
        </config>
    </cq:inplaceEditing>
</jcr:root>

[Akanksha_Pratih]

Hi Hemant

Inplace editing is working for text but not for image. When I click on "Edit(pencil)" on component toolbar, I get two options: Image and Text.

If I click on "Text" option, I'm able to edit text part of component.

But if I click on "Image" option, the image which is already there on my component opens as popup on left top corner of page and then I'm able to do nothing.

Kindly Help

Below is my xml:

<?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"
    cq:dialogMode="floating"
    jcr:primaryType="cq:EditConfig">
    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <image
            jcr:primaryType="cq:DropTargetConfig"
            accept="[image/.*]"
            groups="[media]"
            propertyName="./fileReference">
            <parameters
                jcr:primaryType="nt:unstructured"
                sling:resourceType="/apps/pjt/components/content/poctextimage">
                <image
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="foundation/components/image"
                    imageCrop=""
                    imageMap=""
                    imageRotate=""/>
            </parameters>
        </image>
    </cq:dropTargets>
    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        configPath="../../dialog/items/tab2/items/text"
        editorType="hybrid">
        <cq:childEditors jcr:primaryType="nt:unstructured">
            <image
                jcr:primaryType="cq:ChildEditorConfig"
                title="Image"
                type="image"/>
            <text
                jcr:primaryType="cq:ChildEditorConfig"
                title="Text"
                type="text"/>
        </cq:childEditors>
    </cq:inplaceEditing>
</jcr:root>

[arpit-rathi]

Hey, Have you got any fix for the same?

[smacdonald2008]

If is this still broken - open a support ticket.

[chirran414]

Have you got any solution? I am also facing similar issue.

[jasonz90639904]

I fixed the issue by adding "cq-dd-image" to original image rendering like below

<div

    data-sly-test="${highlight.hasContent}"

    class="cq-dd-image textimage-${highlight.alignment || 'left'}"

    data-sly-resource="${'image' @ resourceType='core/wcm/components/image/v1/image' , wcmmode='disabled'}"></div>

As inplace editing renders based on position of original image (to override on top), it get image position by "cq-dd-image" selector.