Ad Code

Thursday, February 7, 2019

cq:inplaceEditing in cq:editConfig Node in AEM


Hello Everyone,

In my previous blog, you have already gone through about cq:dropTargets and
now in this blog we will talk about how to use cq:inplaceEditing in components.

Inplace editing is also a good feature to add in your component and is usually
used for rich Text and image widgets.

Let’s talk about how to use this feature and all the possible scenarios where this
feature can be used.
Inline Editing in Text (RichText) Component:
In the richText widget, you can change the content using inline editing without opening the dialog.
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and add the following properties in the same node.
editorType
string
text
active
boolean
true

Step2: Make a node “config” as a child node of cq:inplaceEditing and add a property “textPropertyName” and the value must be the name property of the field (richText field) for which you are doing inplace editing.
textPropertyName
text
Through these steps you can only see default plugins of rich Text editor.

Demonstration Video on cq:editConfig in Text (RichText) Component in AEM

Inline Editing for any TextField Widget in a Component
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and add the following properties in the same node.
editorType
string
plaintext
active
boolean
true

Step2: Make a node “config” as a child node of cq:inplaceEditing and add a
property “textPropertyName” and the value must be the name property of the
text field for which you are doing inplace editing.
textPropertyName
text

Demonstration Video on cq:editConfig for any TextField Widget in AEM

Inline Editing in Title Component
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and
add the following properties in the same node.
editorType
string
title
active
boolean
true
Step2: Make a node “config” as a child node of cq:inplaceEditing and
add a property “titleTag” as shown below.
titleTag
String[]
h1,h2,h3,h4
Note: The inline editing for title component will only work for the name property ”jcr:title”.
Note: “titleTag” is important so that you can do inline editing in title sitting under a heading Tag.
Demonstration Video on cq:editConfig in Title Component in AEM

Inline Editing in Image Component
In the Image Component, using inline editing, the author can crop,flip,zoom and rotate the images.
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and
add the following properties in the same node.
editorType
string
image
active
boolean
true

Step2: In the html file of the component, use the class “cq-dd-image” to render the inplace editing plugins.For example:

<div class="cq-dd-image ">
               <img src="${image}" alt="${properties.imageAltText}"  />
</div>

In short, the html should have this (cq-dd-image) class to render the image with inline editing plugins.

The js file /libs/cq/gui/components/authoring/editors/clientlibs/core/inlineediting
/js/ImageEditor.js gets loaded while opening the dialog,find for the class and render the image for inline editing.

Through these steps, you can only show default inplace editing plugins in the Image Component.
Here no need to add “config” node for “propertyName”, which image will be inside the class
,that image will start showing plugins.

You can add custom plugins for inplace editing using the particular xml here.

Demonstration Video on cq:editConfig in Image Component in AEM


Please go through the demo video for clear understanding of inplaceEditing in
all the possible components.

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!
Thanks and Happy Learning.

8 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. Hi can you explain Carousel component??

    ReplyDelete
  5. I changed into quite thrilled to find this web page. I wanted to thanks for ones time for this terrific study!! I truely liked every little bit of it and I have you saved to fav to peer new statistics on your info.

    ReplyDelete
  6. Article has a complete data with nice information. Good work keep it up and collect much more data.

    Java Training in Chennai

    Java Course in Chennai

    ReplyDelete
  7. Hi Saurabh, nice article. For us the issue is that the plugin takes lot more time to load. On edit, only text is displayed first and after 12/13 seconds the RTE icons show up. Is there any way it can be made faster to load?

    ReplyDelete
  8. You are too fast, even though content is good your speed makes it useless

    ReplyDelete