Vous consultez actuellement l'aide de la version:

Il est possible de configurer votre composant afin qu’il comporte plusieurs éditeurs statiques dans l’interface utilisateur optimisée pour les écrans tactiles.

Une fois le composant configuré, vous pouvez sélectionner le contenu approprié et ouvrir l’éditeur adéquat. Par exemple :

chlimage_1

Configuration de plusieurs éditeurs

Pour qu’il soit possible d’activer plusieurs éditeurs statiques, la structure d’un type de nœud cq:InplaceEditingConfig a été optimisée avec la définition du type de nœud cq:ChildEditorConfig.

Par exemple :

   /**
       * 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)

Pour configurer plusieurs éditeurs, procédez comme suit :

  1. Sur le nœud cq:inplaceEditing (de type cq:InplaceEditingConfig), définissez la propriété suivante :

    • Nom : editorType
    • Type : Chaîne
    • Valeur : hybrid
  2. Créez un nœud sous celui-ci :

    • Nom : cq:ChildEditors
    • Type : nt:unstructured
  3. Sous le nœud cq:childEditors, créez un nœud pour chaque éditeur statique :

    • Nom : le nom de chaque nœud doit être celui de la propriété qu’il représente (comme avec les cibles de dépôt). Par exemple, image, text.
    • Type : cq:ChildEditorConfig

    Remarque :

    Il existe une corrélation entre les cibles de dépôt définies et les éditeurs enfants. Le nom du nœud cq:ChildEditorConfig sera considéré comme étant l’ID de la cible de dépôt à utiliser en tant que paramètre pour l’éditeur enfant sélectionné. Si la sous-zone modifiable ne comporte pas de cible de dépôt (comme avec un composant texte, par exemple), le nom de l’éditeur enfant est toujours considéré comme un moyen d’identifier la zone modifiable correspondante.

  4.  

    Définissez les propriétés suivantes sur chacun de ces nœuds (cq:ChildEditorConfig) :

    • Nom : type
    • Valeur : nom de l’éditeur statique enregistré ; par exemple, image, text.
    • Nom : title
    • Valeur : titre que vous souhaitez afficher dans la liste de sélection des composants (éditeurs disponibles) ; par exemple, Image, Text.

Configuration supplémentaire pour les éditeurs de texte enrichi (RTE)

La configuration des éditeurs de texte enrichi est légèrement différente, dans la mesure où vous pouvez configurer chaque instance RTE séparément.  

Remarque :

Pour plus d’informations, voir Configuration de l’éditeur de texte enrichi.

Pour disposer de plusieurs éditeurs de texte enrichi, une configuration est requise pour chaque éditeur statique :

  • Sous cq:InplaceEditingConfig, définissez un nœud config.
    • Sous le nœud config, définissez chaque configuration RTE.
    texttext
        cq:dialog
        cq:editConfig
            cq:inplaceEditing
                cq:childEditors
                    config
                        text1
                            rtePlugins
                        text2
                            rtePlugins

Remarque :

Il est conseillé de définir le nœud config sous cq:InplaceEditingConfig, car chaque éditeur de texte enrichi peut présenter une configuration différente.

Cependant, dans le cas de l’éditeur de texte enrichi, la propriété configPath est prise en charge lorsque le composant ne contient qu’une seule instance de l’éditeur (sous-zone modifiable). Cette utilisation de configPath permet de garantir la rétrocompatibilité avec les boîtes de dialogue du composant conçues pour l’ancienne interface utilisateur.

Exemples de code

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

Ajout d’un éditeur statique

Pour obtenir des informations d’ordre général sur l’ajout d’un éditeur statique, consultez le document Personnalisation de la création de pages.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne