Personalizar y ampliar el editor universal customizing-extending

Obtenga información acerca de los diferentes puntos de extensión y otras funciones que le permiten personalizar la experiencia de creación del Editor universal para satisfacer las necesidades de los autores de contenido.

Información general overview

El editor universal permite dos tipos de adaptación para las necesidades de su proyecto.

Ambos tipos se detallan en las secciones siguientes.

Personalización del editor universal customizing

El editor universal ofrece varias opciones integradas para personalizar su funcionalidad.

Desactivación de publicación disable-publish

Algunos flujos de trabajo de creación requieren que el contenido se revise antes de publicarse. En estos casos, la opción para publicar no debe estar disponible para ningún autor.

Por lo tanto, el botón Publish se puede suprimir por completo en una aplicación añadiendo los siguientes metadatos.

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

Filtrado de componentes filtering-components

Al utilizar el Editor universal, puede restringir los componentes permitidos por componente de contenedor. Para ello, debe introducir una etiqueta de script adicional, que apunte a la definición del filtro.

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

Una definición de filtro puede tener el aspecto siguiente, que restringiría un contenedor para permitir únicamente agregar texto e imágenes.

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

A continuación, puede hacer referencia a la definición del filtro desde el componente contenedor agregando la propiedad data-aue-filter, pasando el ID del filtro definido anteriormente.

data-aue-filter="container-filter"

Al establecer el atributo components en una definición de filtro en null, se permiten todos los componentes, como si no hubiera ningún filtro.

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

Mostrar y ocultar condicionalmente componentes en el panel Propiedades conditionally-hide

Aunque un componente o componentes suelen estar disponibles para los autores, puede haber ciertas situaciones en las que no tiene sentido. En estos casos, puede ocultar componentes en el panel de propiedades agregando un atributo condition a los campos del modelo de componentes.

Las condiciones se pueden definir usando el esquema JsonLogic. Si la condición es verdadera, se mostrará el campo. Si la condición es falsa, el campo estará oculto.

Modelo de ejemplo

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] } } ] }

Condición falsa

Condición verdadera

URL de vista previa personalizadas custom-preview-urls

Puede especificar una URL de vista previa personalizada mediante una metaconfiguración de urn:adobe:aue:config:preview, que se abrirá al hacer clic en el botón Abrir página en la barra de herramientas superior derecha del editor.

Esto es especialmente útil para aplicaciones con requisitos de vista previa específicos, como las que utilizan Edge Delivery Services con la creación de WYSIWYG.

Para ello, simplemente incluya la URL de vista previa deseada en una metaetiqueta de la aplicación instrumentada como en el siguiente ejemplo.

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

Ampliación de la IU del editor universal extending

Como servicio de Adobe Experience Cloud, la interfaz de usuario del editor universal se puede ampliar con el Experience Manager y App Builder.

Las extensiones de interfaz de usuario son aplicaciones de JavaScript creadas con Adobe App Builder que se pueden incrustar en aplicaciones de interfaz de usuario que se ejecutan en el shell unificado de Adobe Experience Cloud, como el editor universal. Puede agregar sus propios botones y acciones al menú de encabezado y al panel de propiedades, así como crear sus propios eventos para el editor universal.

Si desea explorar estas posibilidades, consulte los siguientes recursos:

Con Extension Manager en AEM Sites, puede habilitar o deshabilitar las extensiones por instancia, tener acceso a las extensiones de origen de Adobe, incluidas las del editor universal, y mucho más.