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 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 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.