Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

AEM 6.1 Touch UI Component Inplace editing

Avatar

Level 2

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

6 Replies

Avatar

Level 9

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>

Avatar

Level 2

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>

Avatar

Level 5

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

Avatar

Level 1

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.