cq:inplaceEditing in cq:editConfig Node in AEM

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.

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

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.