Personalizzazione ed estensione dell’editor universale customizing-extending

Scopri i diversi punti di estensione e altre funzioni che consentono di personalizzare l’esperienza di authoring di Universal Editor per supportare le esigenze degli autori di contenuti.

Panoramica overview

L’editor universale consente due tipi di adattamento in base alle esigenze del progetto.

Entrambi i tipi sono descritti nelle sezioni seguenti.

Personalizzare l’Editor universale customizing

Universal Editor offre diverse opzioni incorporate per personalizzarne le funzionalità.

Disabilitazione della pubblicazione disable-publish

Alcuni flussi di lavoro di authoring richiedono la revisione del contenuto prima della pubblicazione. In tali situazioni, l’opzione per pubblicare non deve essere disponibile per alcun autore.

Il pulsante Publish può quindi essere eliminato completamente in un'app aggiungendo i metadati seguenti.

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

Filtraggio dei componenti filtering-components

Quando utilizzi l’Editor universale, puoi limitare i componenti consentiti per componente contenitore. A questo scopo, devi introdurre un tag script aggiuntivo che punti alla definizione del filtro.

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

Una definizione di filtro potrebbe avere un aspetto simile al seguente, il che impedirebbe a un contenitore di aggiungere solo testo e immagini.

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

È quindi possibile fare riferimento alla definizione del filtro dal componente contenitore aggiungendo la proprietà data-aue-filter, passando l'ID del filtro definito in precedenza.

data-aue-filter="container-filter"

L'impostazione dell'attributo components in una definizione di filtro su null consente tutti i componenti, come se non ci fosse alcun filtro.

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

Mostra e nascondi componenti in modo condizionale nella barra delle proprietà conditionally-hide

Anche se uno o più componenti possono essere generalmente disponibili per gli autori, in alcune situazioni potrebbe non avere senso. In questi casi, è possibile nascondere i componenti nella barra delle proprietà aggiungendo un attributo condition ai campi del modello di componente.

Le condizioni possono essere definite utilizzando lo schema JsonLogic. Se la condizione è true, il campo verrà visualizzato. Se la condizione è false, il campo verrà nascosto.

Modello di esempio
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] }
      }
    ]
 }
Condizione False
Campo di testo nascosto
Condizione Vera
Campo di testo visualizzato

Estensione dell’interfaccia utente dell’editor universale extending

In qualità di servizio di Adobe Experience Cloud, l’interfaccia utente dell’editor universale può essere estesa utilizzando App Builder e Experience Manager.

Le estensioni dell’interfaccia utente sono applicazioni JavaScript create con Adobe App Builder che possono essere incorporate nelle applicazioni UI eseguite in Adobe Experience Cloud Unified Shell, ad esempio Universal Editor. Puoi aggiungere i tuoi pulsanti e le tue azioni al menu dell’intestazione e alla barra delle proprietà, nonché creare eventi personalizzati per Universal Editor.

Se desideri esplorare queste possibilità, consulta le seguenti risorse:

  1. Estensibilità interfaccia utente - Questa è la documentazione per gli sviluppatori per l'estensione dell'interfaccia utente.
  2. Guide all'estendibilità dell'interfaccia utente: istruzioni dettagliate su come sviluppare un'estensione personalizzata
  3. Punti di estensione di Universal Editor - Documentazione del punto di estensione specifica di Universal Editor
TIP
Se preferisci imparare da esempio, consulta l'esercitazione sull'estensibilità dell'interfaccia utente dell'AEM . Anche se si concentra sull'estensione della console Frammenti di contenuto, i concetti per l'implementazione di un'estensione dell'interfaccia utente nell'editor universale sono gli stessi.

Utilizzando Extension Manager in AEM Sites, puoi abilitare o disabilitare le estensioni per singole istanze, accedere alle estensioni di prime parti di Adobe, incluse quelle per Universal Editor, e molto altro.

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