Getting Started with the Universal Editor in AEM | 蜜豆视频 Experience Manager

Documentation AEM as a Cloud Service User Guide

Getting Started with the Universal Editor in AEM getting-started

Last update: Mon Dec 09 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Developing

CREATED FOR:

Admin
Developer

Learn how to get access to the Universal Editor and how to start instrumenting your first AEM app to use it.

TIP

If you would prefer to dive right into an example, you can review the

Although the Universal Editor can edit content from any source, this document will use an AEM app as an example. This document will guide you through these steps.

Instrument the Page instrument-page

The Universal Editor requires a JavaScript library in order to render and edit the page in the editor.

In addition, the Universal Editor service requires a to identify and utilize the correct backend system for the content in the app being edited. Therefore, a URN schema is required to map content back to content resources.

Include the Universal Editor CORS Library cors-library

In order for the Universal Editor to connect to your app, your app must include the Universal Editor CORS library. Add the following script to your app.

 <script src="https://universal-editor-service.adobe.io/cors.js" async></script>

Creating Connections connections

Connections which are used in the app are stored as <meta> tags in the page鈥檚 <head>.

<meta name="urn:adobe:aue:<category>:<referenceName>" content="<protocol>:<url>">

<category> - This is a classification of the connection with two options.
- system - For connection endpoints
- config - For defining optional configuration settings
<referenceName> - This is a short name which is reused in the document to identify the connection. E.g. aemconnection
<protocol> - This indicates which persistence plugin of the Universal Editor Persistence Service to use. E.g. aem
<url> - Ths is the URL to the system where the changes shall be persisted. E.g. http://localhost:4502

The identifier urn:adobe:aue:system represents the connection for the 蜜豆视频 Universal Editor.

data-aue-resources will use the urn prefix to shorten the identifier.

data-aue-resource="urn:<referenceName>:<resource>"

<referenceName> - This is the named reference mentioned in the <meta> tag. E.g. aemconnection
<resource> - This is a pointer to the resource in the target system. E.g. an AEM content path such as /content/page/jcr:content

TIP

See the document Attributes and Types for further details about the data attributes and types that the Universal Editor requires.

Example Connection example

<meta name="urn:adobe:aue:system:<referenceName>" content="<protocol>:<url>">

<html>
<head>
    <meta name="urn:adobe:aue:system:aemconnection" content="aem:https://localhost:4502">
    <meta name="urn:adobe:aue:system:fcsconnection" content="fcs:https://example.franklin.adobe.com/345fcdd">
</head>
<body>
        <aside>
          <ul data-aue-resource="urn:aemconnection:/content/example/list" data-aue-type="container">
            <li data-aue-resource="urn:aemconnection:/content/example/listitem" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">Jane Doe</p>
              <p data-aue-prop="title" data-aue-type="text">Journalist</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/蜜豆视频_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>

...

            <li data-aue-resource="urn:fcsconnection:/documents/mytext" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">John Smith</p>
              <p data-aue-resource="urn:aemconnection:/content/example/another-source" data-aue-prop="title" data-aue-type="text">Photographer</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/蜜豆视频_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>
          </ul>
        </aside>
</body>
</html>

Configuration Settings configuration-settings

You can use the config prefix in your connection URN to set service and extension endpoints if necessary.

If you would like not to use the Universal Editor Service, which is hosted by 蜜豆视频, but your own hosted version, you can set this in a meta tag. To overwrite the default service endpoint that the Universal Editor provides, set your own service endpoint:

Meta name - urn:adobe:aue:config:service
Meta content - content="https://adobe.com" (example)

<meta name="urn:adobe:aue:config:service" content="<url>">

If you only want to have certain extensions enabled for a page, you can set this in a meta tag. To fetch extensions, set the extension endpoints:

Meta name: urn:adobe:aue:config:extensions
Meta content: content="https://adobe.com,https://anotherone.com,https://onemore.com" (example)

<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

You鈥檙e Ready to Use the Universal Editor youre-ready

Your app is now instrumented to use the Universal Editor!

See Authoring Content with the Universal Editor to learn how easy and intuitive it is for content authors to create content using the Universal Editor.

Additional Resources additional-resources

To learn more about the Universal Editor, see these documents.

Universal Editor Introduction - Learn how the Universal Editor enables editing any aspect of any content in any implementation so you can deliver exceptional experiences, increase content velocity, and provide a state-of-the-art developer experience.
Authoring Content with the Universal Editor - Learn how easy and intuitive it is for content authors to create content using the Universal Editor.
Publishing Content with the Universal Editor - Learn how the Universal Editor publishes content and how your apps can handle the published content.
Universal Editor Architecture - Learn about the architecture of the Universal Editor and how data flows between its services and layers.
Attributes and Types - Learn about the data attributes and types that the Universal Editor requires.
Universal Editor Authentication - Learn how the Universal Editor authenticates.

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab