Événements d’éditeur universels events

Découvrez les différents événements que l’éditeur universel envoie et que vous pouvez utiliser pour réagir aux changements de contenu ou d’interface utilisateur dans votre application distante.

Introduction introduction

Les applications peuvent avoir des exigences différentes pour les mises à jour de page ou de composant. Par conséquent, l’éditeur universel envoie des événements définis aux applications distantes. Si l’application distante n’a pas d’écouteur d’événement personnalisé pour l’événement envoyé, une écouteur d’événement de secours fourni par la fonction universal-editor-cors est exécuté.

Tous les événements sont appelés sur l’élément DOM affecté de la page distante. Les événements sont propagés à la variable BODY élément où l’écouteur d’événement par défaut fourni par la variable universal-editor-cors est enregistré. Il existe des événements pour le contenu et des événements pour l’interface utilisateur.

Tous les événements suivent une convention d’affectation des noms.

  • aue:<content-or-ui>-<event-name>

Par exemple : aue:content-update et aue:ui-select

Les événements incluent la charge utile de la requête et de la réponse et sont déclenchés une fois que l’appel correspondant a réussi. Pour plus d’informations sur les appels et des exemples de leurs payloads, consultez le document . Appels universels de l’éditeur.

Événements de mise à jour de contenu content-events

aue:content-add content-add

La variable aue:content-add est déclenché lorsqu’un nouveau composant est ajouté à un conteneur.

La payload est le contenu du service Universal Editor, avec le contenu de secours de la définition du composant.

{
    details: {
        request: request payload;   // what is sent to the service
        response: {                 // what is returned by the service
            resource: string;       // newly created content resource
            updates: [{
                resource: string;   // resource to update
                type: string;       // type of instrumentation
                content?: string;   // content to replace
            }]
        }
    }
}

aue:content-details content-details

La variable aue:content-details est déclenché lorsqu’un composant est chargé dans le rail des propriétés.

La payload est le contenu du composant et éventuellement son schéma.

{
    details: {
        content: object             // content object
        model: [object]             // model object
        request: request payload;   // what is sent to the service
        response: response payload; // what is returned by the service
    }
}

aue:content-move content-move

La variable aue:content-move est déclenché lorsqu’un composant est déplacé.

La charge utile est le composant, le conteneur source et le conteneur cible.

{
    details: {
        from: string;                   // container we move the component from
        component: string;              // component we move
        to: string;                     // container we move the component to
        before: string;                    // before which component shall we place the component
        request: request payload;       // what is sent to the service
        response: response payload;     // what is returned by the service
    }
}

aue:content-patch content-patch

La variable aue:content-patch est déclenché lorsque les données d’un composant sont mises à jour dans le rail des propriétés.

La payload est un correctif JSON des propriétés mises à jour.

{
    details: {
        patch: {
            name: string;               // attribute which is updated
            value: string;              // new value which is stored to the attribute
        },
        request: request payload;       // what is sent to the service
        response: response payload;     // what is returned by the service
    }
}

aue:content-remove content-remove

La variable aue:content-remove est déclenché lorsqu’un composant est supprimé d’un conteneur.

La payload est l’identifiant de l’élément du composant supprimé.

{
    details: {
        resource: string;               // the resource which got removed
        request: request payload;       // what is sent to the service
        response: response payload;     // what is returned by the service
    }
}

aue:content-update content-update

La variable aue:content-update est déclenché lorsque les propriétés d’un composant sont mises à jour en contexte.

La payload est la valeur mise à jour.

{
    details: {
        value: string;                  // updated value
        request: request payload;       // what is sent to the service
        response: response payload;     // what is returned by the service
    }
}

Transmission de payloads passing-payloads

Pour tous les événements de mise à jour du contenu, la charge utile demandée ainsi que la charge de réponse sont transmises à l’événement. Par exemple, pour un appel de mise à jour :

Charge utile de requête :

{
  "connections": [
    {
      "name": "aemconnection",
      "protocol": "aem",
      "uri": "https://author-p7452-e12433.adobeaemcloud.com"
    }
  ],
  "target": {
    "resource": "urn:aemconnection:/content/dam/wknd-shared/en/magazine/arctic-surfing/aloha-spirits-in-northern-norway/jcr:content/data/master",
    "type": "text",
    "prop": "title"
  },
  "value": "Alhoa Spirit Northern Norway!"
}

Payload de réponse

{
    "updates": [
        {
            "resource": "urn:aemconnection:/content/dam/wknd-shared/en/magazine/arctic-surfing/aloha-spirits-in-northern-norway/jcr:content/data/master",
            "prop": "title",
            "type": "text"
        }
    ]
}

Événements de l’interface utilisateur ui-events

aue:ui-publish ui-publish

La variable aue:ui-publish se déclenche lorsque le contenu est publié (avec un appel au niveau de la fonction BODY niveau).

La payload est une liste d’identifiants d’élément et de leur état de publication.

aue:ui-select ui-select

La variable aue:ui-select est déclenché lorsqu’un composant est sélectionné.

La charge utile correspond à l’identifiant de l’élément, aux propriétés de l’élément et au type d’élément du composant sélectionné.

{
    details: {
        resource: string;       // resource of the selected
        prop: string;           // prop of the selected
        type: string;           // type of the selected
        selected: boolean;      // was selected or unselected
    }
}

aue:ui-preview ui-preview

La variable aue:ui-preview est déclenché lorsque le mode de modification de la page est remplacé par Aperçu.

La payload est vide pour cet événement.

{
    details: {}
}

aue:ui-edit ui-edit

La variable aue:ui-edit est déclenché lorsque le mode de modification de la page est remplacé par Modifier.

La payload est vide pour cet événement.

{
    details: {}
}

aue:ui-viewport-change ui-viewport-change

La variable aue:ui-viewport-change est déclenché lorsque la taille de la fenêtre d’affichage est modifiée.

La payload est les dimensions de la fenêtre d’affichage.

{
    details: {
        height: number?;        // height of the viewport. Undefined when fullscreen
        width: number?;         // width of the viewport. Undefined when fullscreen
    }
}

aue:initialized initialized

La variable aue:initialized est déclenché pour faire savoir à la page distante qu’elle est correctement chargée dans Universal Editor.

La payload est vide pour cet événement.

{
    details: {}
}

Écouteurs d’événements de secours fallback-listeners

Mises à jour du contenu content-update-fallbacks

Événement
Comportement
aue:content-add
Rechargement de page
aue:content-details
Ne rien faire
aue:content-move
Déplacer le contenu/la structure du composant vers la zone cible
aue:content-patch
Rechargement de page
aue:content-remove
Suppression de l’élément DOM
aue:content-update
Mettez à jour le innerHTML avec la payload

Événements de l’interface utilisateur ui-event-fallbacks

Événement
Comportement
aue:ui-publish
Ne rien faire
aue:ui-select
Accédez à l’élément sélectionné
aue:ui-preview
Ajouter class="adobe-ue-preview" à la balise de HTML
aue:ui-edit
Ajouter class=adobe-ue-edit" à la balise de HTML
aue:ui-viewport-change
Ne rien faire
aue:initialized
Ne rien faire

Ressources supplémentaires additional-resources

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab