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 nel pannello 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 nel pannello 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

Condizione Vera

URL di anteprima personalizzati custom-preview-urls

Puoi specificare un URL di anteprima personalizzato tramite una metaconfigurazione urn:adobe:aue:config:preview, che si aprirà facendo clic sul pulsante Apri pagina nella barra degli strumenti in alto a destra dell'editor .

Ciò è particolarmente utile per le applicazioni con requisiti di anteprima specifici, ad esempio quelle che utilizzano Edge Delivery Services con l'authoring WYSIWYG.

Per farlo, includi semplicemente l’URL di anteprima desiderato in un metatag dell’app instrumentata come nell’esempio seguente.

<meta name="urn:adobe:aue:config:preview" content="https://wknd.site"/>

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 in applicazioni UI eseguite in Adobe Experience Cloud Unified Shell, ad esempio Universal Editor. Puoi aggiungere pulsanti e azioni personalizzati al menu e al pannello delle proprietà dell’intestazione, nonché creare eventi personalizzati per Universal Editor.

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

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.