Configure multiple in-place editors configure-multiple-in-place-editors

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Developing

CREATED FOR:

Developer

CAUTION

AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

You can configure Rich Text Editor in Adobe Experience Manager so that it has multiple in-place editors. When configured you can select the appropriate content and open the appropriate editor.

A specific in-place editor

Configure multiple editors configure-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 in-place editing of a component.
       *
       * @prop active true to activate in-place editing for the component.
       * @prop editorType ID of in-place 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 sub-component. The name of the this node is
      * used as DD ID.
      *
      * @prop type type of the inline editor. For example, ["image"].
      * @prop title Title of the inline editor.
      * @prop icon Icon to represent the inline editor.
    */
    [cq:ChildEditorConfig] > nt:unstructured
      orderable
      - type (string)
      - title (string)

To configure multiple editors, follow these steps:

On the node cq:inplaceEditing (of type cq:InplaceEditingConfig) define the following properties:
- Name:editorType
- Type: String
- Value: hybrid
Under this node, create a node:
- Name: cq:ChildEditors
- Type: nt:unstructured

Under cq:childEditors node, create a node for each in-place editor:

Name: The name of each node is the name of the property that it represents, as is the case with drop targets. For example, image and text.
Type: cq:ChildEditorConfig

note note

note note
NOTE
There is a correlation between the defined drop targets and the child editors. The name of the `cq:ChildEditorConfig` node is considered as 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, for example, in a text component, then the name of the child editor is still considered as an ID to identify the corresponding editable area.

NOTE

There is a correlation between the defined drop targets and the child editors. The name of the cq:ChildEditorConfig node is considered as 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, for example, in a text component, then the name of the child editor is still considered as an ID to identify the corresponding editable area.

On each of these nodes (cq:ChildEditorConfig) define the properties:
- Name: type.
- Value: The name of the registered in-place editor; for example, image and text.
- Name: title.
- Value: The title displayed in the components selection list of the available editors. For example, Image and Text.

Additional configuration for Rich Text Editors additional-configuration-for-rich-text-editors

Configuration for multiple Rich Text Editors is slightly different as you can configure each individual RTE instance separately. For details, see configure the Rich Text Editor. To have multiple RTEs create a configuration for each in-place RTE. Adobe recommends creating the new configuration node under cq:InplaceEditingConfig as each individual RTE can have a different configuration. Under the new node create each individual RTE configuration.

    texttext
        cq:dialog
        cq:editConfig
            cq:inplaceEditing
                cq:childEditors
                    someconfig
                        text1
                            rtePlugins
                        text2
                            rtePlugins

NOTE

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 user interface dialogs of the component.

CAUTION

Do not name the RTE configuration node as config. Otherwise, the RTE configurations are available for only the administrators and not for the users in the group content-author.

Code samples code-samples

You can find the code of this page on aem-authoring-hybrideditors project on GitHub. You can download the complete project as a ZIP archive.

Add an in-place editor add-an-in-place-editor

For general information about adding an in-place editor see the document customize page authoring.

recommendation-more-help

2315f3f5-cb4a-4530-9999-30c8319c520e