Personnalisation et extension de l’éditeur universel customizing-extending

Découvrez les différents points d’extension et autres fonctionnalités qui vous permettent de personnaliser l’expérience de création d’Universal Editor afin de prendre en charge les besoins de vos auteurs de contenu.

Vue d’ensemble overview

L’éditeur universel permet deux types d’adaptation aux besoins de votre projet.

Les deux types sont présentés dans les sections suivantes.

Personnaliser l’éditeur universel customizing

Universal Editor propose plusieurs options intégrées pour personnaliser ses fonctionnalités.

Désactivation de la publication disable-publish

Certains workflows de création nécessitent que le contenu soit examiné avant d’être publié. Dans ce cas, l’option de publication ne doit être disponible pour aucun auteur.

Le bouton Publish peut donc être entièrement supprimé dans une application en ajoutant les métadonnées suivantes.

<meta name="urn:adobe:aue:config:disable" content="publish"/>

Filtrage des composants filtering-components

Lorsque vous utilisez l’éditeur universel, vous pouvez limiter les composants autorisés par composant de conteneur. Pour ce faire, vous devez introduire une balise de script supplémentaire, qui pointe vers la définition de filtre.

<script type="application/vnd.adobe.aue.filter+json" src="/static/filter-definition.json"></script>

Une définition de filtre peut se présenter comme suit, ce qui limite un conteneur pour qu’il n’autorise que l’ajout de texte et d’images.

[
  {
    "id": "container-filter",
     "components": ["text", "image"]
   }
]

Vous pouvez ensuite référencer la définition de filtre à partir de votre composant de conteneur en ajoutant la propriété data-aue-filter, en transmettant l’identifiant du filtre que vous avez défini précédemment.

data-aue-filter="container-filter"

La définition de l’attribut components dans une définition de filtre sur null autorise tous les composants, comme s’il n’y avait aucun filtre.

[
  {
    "id": "another-container-filter",
     "components": null
   }
]

Afficher et masquer les composants de manière conditionnelle dans le rail des propriétés conditionally-hide

Bien qu’un ou plusieurs composants puissent généralement être disponibles pour les auteurs, il peut arriver qu’ils n’aient pas de sens dans certains cas. Dans ce cas, vous pouvez masquer des composants dans le rail de propriétés en ajoutant un attribut condition aux champs du modèle de composant.

Les conditions peuvent être définies à l’aide du schéma JsonLogic. Si la condition est vraie, le champ s’affiche. Si la condition est fausse, le champ est masqué.

Exemple de modèle
code language-json
 {
    "id": "conditionally-revealed-component",
    "fields": [
      {
        "component": "boolean",
        "label": "Shall the text field be revealed?",
        "name": "reveal",
        "valueType": "boolean"
      },
      {
        "component": "text-input",
        "label": "Hidden text field",
        "name": "hidden-text",
        "valueType": "string",
        "condition": { "===": [{"var" : "reveal"}, true] }
      }
    ]
 }
Condition False
Champ de texte masqué
Condition True
Champ de texte affiché

Extension de l’interface utilisateur de l’éditeur universel extending

En tant que service Adobe Experience Cloud, l’interface utilisateur d’Universal Editor peut être étendue à l’aide d’App Builder et d’Experience Manager.

Les extensions d’IU sont des applications JavaScript créées avec Adobe App Builder qui peuvent être incorporées dans des applications d’IU qui s’exécutent sous le shell unifié Adobe Experience Cloud, comme Universal Editor. Vous pouvez ajouter vos propres boutons et actions au menu d’en-tête et au rail de propriétés, ainsi que créer vos propres événements pour l’éditeur universel.

Si vous souhaitez explorer ces possibilités, consultez les ressources suivantes :

  1. Extensibilité de l’interface utilisateur - Il s’agit de la documentation destinée aux développeurs concernant l’extension de l’interface utilisateur.
  2. Guides d’extensibilité de l’interface utilisateur - Instructions détaillées sur la manière de développer votre propre extension
  3. Points d’extension Universal Editor - Documentation de point d’extension universelle spécifique à l’éditeur
TIP
Si vous préférez apprendre par exemple, consultez le tutoriel sur l’extensibilité de l’interface utilisateur AEM. Bien qu’il se concentre sur l’extension de la console Fragment de contenu, les concepts de mise en oeuvre d’une extension d’interface utilisateur dans l’éditeur universel sont les mêmes.

À l’aide d’Extension Manager dans AEM Sites,vous pouvez activer ou désactiver vos extensions au niveau de chaque instance, accéder aux extensions propriétaires de l’Adobe, y compris celles pour l’éditeur universel, et bien plus encore.

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