Authoring Content with the Universal Editor authoring
Learn how easy and intuitive it is for content authors to create content using the Universal Editor.
Introduction introduction
The Universal Editor enables editing any aspect of any content in any implementation so you can deliver exceptional experiences and increase content velocity.
To do this, the Universal Editor provides content authors with an intuitive UI that requires minimal training to simply be able to jump in and begin editing content. This document describes the authoring experience of the Universal Editor.
Editing Content editing-content
Editing content is simple and intuitive. As you mouse over content in the editor, editable content is highlighted with a thin blue outline.
Depending on the content you select, you may have different in-place editing options and you may additional information and options for the content in the properties panel.
Editing Plain Text edit-plain-text
You can edit the text in place by double-clicking or double-tapping the component.
The thin blue outline turns to a heavy blue outline to indicate select and a cursor appears. Make your changes and then press enter/return or select outside of the text box to save your changes.
When you select to select the text component, its details are shown in the properties panel. You can also edit the text in the panel.
Also, details on your text are available in the properties panel. Changes are automatically saved once focus leaves the edited field in the properties panel.
Editing Rich Text edit-rich-text
You can edit the text in place by double-clicking or double-tapping the component.
For your convenience, formatting options and details on your text are available in two places.
The Context Menu context-menu
The context menu opens above the rich text block and offers basic formatting options in context. Due to space limitations, some options may be hidden behind the ellipsis button.
Changes are automatically saved once focus leaves the edited field.
The Properties Panel properties-rail
The properties panel shows an item for the selected text. Tap the entry to open a dialog presenting a larger canvas to edit the text.
Tap or click Cancel or Done to discard or save the changes, respectively.
Editing Media edit-media
You can view its details in the properties panel.
- Tap or click the preview of the selected image in the properties panel.
- The asset selector window opens to allow you to select an asset.
- Select to select a new asset.
- Select Select to return to the properties panel where the asset was replaced.
Changes are saved to your content automatically.
Editing Content Fragments edit-content-fragment
If you select a Content Fragment, you can edit its details in the properties panel.
The fields defined in the content model of the selected Content Fragment are displayed and editable in the properties panel.
If you select a field that is related to a Content Fragment, the Content Fragment loads in the components panel and the field is automatically scrolled to.
Changes are automatically saved once focus leaves the edited field in the properties panel.
If you want to edit your Content Fragment in the Content Fragment editor instead, tap or click the Open in CF Editor button in the properties panel.
e to edit the selected Content Fragment in the Content Fragment editor.Depending on the needs of your workflow, you may want to edit the Content Fragment in the Universal Editor or directly in the Content Fragment editor.
Adding Components to Containers adding-components
-
Select a container component in the content tree or in the editor.
-
Then select the add icon in the properties panel.
The component is inserted into the container and can be edited in the editor.
a to add a component to the selected container.Duplicating Components in Containers duplicating-components
-
Select a component in a container using the content tree or the editor.
-
Then select the Duplicate icon in the properties panel.
-
The component is duplicated and inserted below the selected component.
The component is inserted into the container and can be edited in the editor.
Deleting Components from Containers deleting-components
-
Select a container component in the content tree or in the editor.
-
Select the chevron icon of the container to expand its contents in the content tree.
-
Then, in the content tree, select a component within the container.
-
Select the delete icon in the properties panel.
The selected component deleted.
Shift+Backspace to delete the selected component from its container.Reordering Components reordering-components
-
If not already in content tree mode, switch to it.
-
Select a container component in the content tree or in the editor.
-
Select the chevron icon of the container to expand its contents in the content tree.
-
Drag handle icons next to the components within the container show that you can rearrange them. Drag the components to reorder them within the container.
-
The dragged component turns gray in the content tree, while your insertion point is represented by a blue line. Release the component to place it in its new location.
The components are reordered in both the content tree and in the editor.
Previewing Content previewing-content
When you are finished editing content, you often want to navigate it to see how it looks in the content of other pages. In preview mode you can click links to navigate your content as a reader would. The content is rendered in the editor as it would be published.
In preview mode, tapping or clicking on content reacts as it would to a reader of the content. If you want to select the content for editing, toggle out of preview mode.
Editing Component Inheritance inheritance
Inheritance is the mechanism where content can be linked such that changing one automatically changes the other.
Using the Universal Editor, you can cancel inheritance for content by simply updating the content. The editor automatically disables inheritance for all changes made by authors on that page, ensuring that modified content is retained when updates are synchronized from the blueprint.
If the AEM Multi-Site-Management (MSM) Extension is enabled for your program, you have additional toolbar options to view and change the inheritance status of an individual component within the Universal Editor.
For more details on how inheritance works using the Universal Editor, see Content Inheritance in the Universal Editor.
Optional Toolbar Features toolbar-options
Additional features are available as extensions to the Universal Editor to help you further manage your pages and content. These extensions must be enabled in your program by an administrator before they are visible to you as a content author in the Universal Editor toolbar.
Inheritance inheritance-extension
The AEM Multi-Site-Management (MSM) Extension displays the current inheritance status of the selected component and allows you to break or reinstate inheritance.
The Inheritance Installed icon in the Universal Editor toolbar shows that inheritance is still active for the selected component.
Tap or click the icon to break inheritance for the selected component. Inheritance is automatically broken if you edit the component.
The Inheritance Broken icon shows that inheritance has been broken for the selected component.
Tap or click the icon to reinstate inheritance for the selected component. You will need to reload the page to refresh the content in order to show the inherited content.
For information on how to enable this extension, please see the Extension Manager documentation.
Accessing Page Properties page-properties
The AEM Page Properties Extension allows quick access to the Page Properties window for the page currently being edited.
Tap or click the Page Properties icon in the Universal Editor toolbar to open the page properties for the page in a new browser tab.
For information on how to enable this extension, please see the Extension Manager documentation.
Access Sites Console sites-console
The AEM Site Admin Extension allows quick access to the page being edited within the Sites Console of AEM, allowing you to navigate the site tree or perform page-level actions in the console.
Tap or click the icon to open the Sites Console in a new browser tab, navigated to the page currently in the editor.
For information on how to enable this extension, please see the Extension Manager documentation.
Locking and Unlocking Pages locking-pages
The AEM Page Lock Extension displays the current lock status of the page in the editor and allows you to lock or unlock the page.
The Unlocked icon in the Universal Editor toolbar shows that the page currently in the editor is not locked.
Tap or click the icon to lock the page.
The Locked icon in the Universal Editor toolbar shows that the page currently in the editor is locked. Hover your mouse over the icon for a tooltip indicating the user who locked the page.
Tap or click the icon to unlock the page if you are the user who locked it.
For information on how to enable this extension, please see the Extension Manager documentation.
Workflows workflows
The AEM Workflows Extension allows you to start a workflow on the page currently in the editor.
Tap or click the Workflows icon in the Universal Editor toolbar to open the Start a workflow modal. The window lists the possible content to which you can apply a workflow.
- In the Workflow Model drop down, select the workflow to apply.
- Provide a description for the workflow in the Name field.
- In the Content to include in workflow list, use the checkboxes to define which content to include in the workflow.
- Tap or click Start Workflow to start the workflow or Close to abort.
For information on how to enable this extension, please see the Extension Manager documentation.
Developer Login developer-login
The AEM Universal Editor Dev Login Extension is useful for developers who are developing locally, enabling a convenient way to authenticate to a local AEM SDK for testing purposes.
Tap or click the Developer Logon icon in the Universal Editor toolbar to provide your local login credentials to sign into your local AEM SDK.
For information on how to enable this extension, please see the Extension Manager documentation.
Optional Properties Panel Features properties-panel-options
Additional features are available as extensions to the Universal Editor to help you further manage your page content. These extensions must be enabled in your program by an administrator before they are visible to you as a content author in the Universal Editor properties panel.
Generate Variations generate-variations
The Generate Variations extension allows you to use generative artificial intelligence (AI) to create variations for your content directly in the properties panel.
Tap or click the Generate Variations icon in the Universal Editor properties panel to receive recommendations and create variations. Please see the document Generate Variations - Integrated in AEM Editors for more details on how generating variations works.
For information on how to enable this extension, please see the Extension Manager documentation.
Additional Resources additional-resources
To learn how to publish content with the universal editor, please see this document.
- Publishing Content with the Universal Editor - Learn how the Universal Editor publishes content and how your apps can handle the published content.
To learn more about the technical details of the Universal Editor, please see these developer 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 and increase content velocity.
- Getting Started with the Universal Editor in AEM - Learn how to get access to the Universal Editor and how to start instrumenting your first AEM app to use it.
- 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.