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, increase content velocity, and provide a state-of-the-art developer experience.
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 blue box.
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 rail.
Editing Plain Text edit-plain-text
You can edit the text in place by double-clicking or double-tapping the component.
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 rail. You can also edit the text in the rail.
Also, details on your text are available in the properties rail. Changes are automatically saved once focus leaves the edited field in the properties rail.
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 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.
- The properties rail shows all formatting options available along with the text.
Changes are automatically saved once focus leaves the edited field.
Editing Media edit-media
You can view its details in the properties rail.
- Tap or click the preview of the selected image in the properties rail.
- 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 rail 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 rail.
The fields defined in the content model of the selected Content Fragment are displayed and editable in the properties rail.
If you select a field that is related to a Content Fragment, the Content Fragment loads in the components rail and the field is automatically scrolled to.
Changes are automatically saved once focus leaves the edited field in the properties rail.
If you want to edit your Content Fragment in the Content Fragment editor instead, click the edit button in the properties rail.
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 rail.
The component is inserted into the container and can be edited in the editor.
A to add a component to the selected container.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 rail.
The selected component deleted.
Shift+Backspace to delete the selected component from its container.Reordering Components in Containers 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.
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, increase content velocity, and provide a state-of-the-art developer experience.
- 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.
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.
For more details on how inheritance works using the Universal Editor, please see the document Content Inheritance in the Universal Editor.