Configuring Multiple In-Place Editors

You are reading the AEM 6.3 version of Configuring Multiple In-Place Editors.
This documentation is also available for the following versions:  AEM 6.2  AEM 6.1 

It is possible to configure your component so that it has multiple in-place editors within the touch-enabled UI.

When configured you can select the appropriate content and open the appropriate editor. For example:

file

Configuring Multiple Editors

To enable multiple in-place editors the structure of a cq:InplaceEditingConfig node type has been enhanced with the definition of cq:ChildEditorConfig node type.

For example:

   /**
       * Configures inplace editing of a component.
       *
       * @prop active true to activate inplace editing for the component
       * @prop editorType ID of inplace editor to use
       * @prop cq:childEditors collection of {@link cq:ChildEditorConfig} nodes.
       * @prop configPath path to editor's config (optional)
       * @node config editor's config (used if no configPath is specified; optional)
     */
    [cq:InplaceEditingConfig] > nt:unstructured
      - active (boolean)
      - editorType (string)
      + cq:childEditors (nt:base) = nt:unstructured
      - configPath (string)
      + config (nt:unstructured) = nt:unstructured

    /**
      * Configures one child editor for a subcomponent. The name of the this node will
      * be used as DD id.
      *
      * @prop type type of the inline editor. eg: ["image"]
      * @prop title totle od the inline editor
      * @prop icon icon to represent the inline editor
    */
    [cq:ChildEditorConfig] > nt:unstructured
      orderable
      - type (string)
      - title (string)
        

Code samples are intended for illustration purposes only.

To configure multiple editors:

  1. On the node cq:inplaceEditing (of type cq:InplaceEditingConfig) define the property:

    • Name: editorType
    • Type: String
    • Value: hybrid
  2. Under this node create a new node:

    • Name: cq:ChildEditors
    • Type: nt:unstructured
  3. Under the cq:childEditors node create a new node for each in-place editor:

    • Name: the name of each node should be the name of the property that it represents (as with drop targets). For example, image, text.
    • Type: cq:ChildEditorConfig

    Note

    There is a correlation between the defined drop targets and the child editors. The name of the cq:ChildEditorConfig node will be considered to be the drop target ID, for use as a parameter to the selected child editor. If the editable sub area does not have a drop target (e.g. as with a text component) then the name of the child editor is still considered as an ID to identify the corresponding editable area.

  4.  

    On each of these nodes (cq:ChildEditorConfig) define the properties:

    • Name: type
    • Value: name of the registered in-place editor; for example, image, text
    • Name: title
    • Value: the title that you want to display in the components selection list (of available editors); for example, Image, Text

Additional Configuration for Rich Text Editors

Configuration for multiple Rich Text Editors is slightly different as you can configure each individual RTE instance separately.  

Note

For further details see Configuring the Rich Text Editor.

To have multiple RTEs you need a configuration for each in-place RTE:

  • Under cq:InplaceEditingConfig define a config node.
    • Under the config node define each individual RTE configuration.
    texttext
        cq:dialog
        cq:editConfig
            cq:inplaceEditing
                cq:childEditors
                    config
                        text1
                            rtePlugins
                        text2
                            rtePlugins
        

Code samples are intended for illustration purposes only.

Note

Recommended best practice is to define the config node under cq:InplaceEditingConfig as each individual RTE can have a different configuration.

However, for RTE, the configPath property is supported when there is only one instance of text editor (editable sub-area) in the component. This use of configPath is provided to support backwards compatibility with older UI dialogs of the component.

Code Samples

Code on GitHub

You can find the code of this page on GitHub

Adding an In-Place Editor

For general information about adding an in-place editor see the document Customizing Page Authoring.

Any questions?

Have a question about this or any other AEM topic? Ask our Community.
Learn more about AEM topics on our help hub.
Was this helpful?

By submitting your feedback, you accept the Adobe Terms of Use.

Thank you for submitting your feedback.