Magnolia 5.5 reached end of life on November 15, 2019. This branch is no longer supported, see End-of-life policy.
This page describes how to develop a custom content editor based on the Magnolia Content editor.
This section mentions what you should be aware of before creating an implementation of the content editor.
A block is a well-defined page section which, together with other blocks and additional meta information, can form a single content composition.
In the context of the content editor app, each item (e.g. a story in the
stories-app) is a composition of N blocks of editable content, such as <hx> headings and <p> paragraphs, complemented by meta information such as the required fields for a lead text and a title of the story:
The content editor UI expects nodes of the type
mgnl:block. These node types are defined in the file
content-editor-nodetypes.xml which resides in the
Hoewever, registration of these node types is handled by the
stories-app or the
article-editor via the XML-based module descriptor.
In any case, your implementation of the content editor depends on the following modules:
Besides the requirement for these "base modules", you must also ensure that the system registers the required node types.
If your custom content editor is created with a light module, your bundle must contain either the
stories-app or the
article-editor module. If created with a Magnolia Maven module, you can register the node types within your custom module.
If you are using a preconfigured Magnolia Enterprise Edition webapp or bundle (see the list of preconfigured Magnolia bundles), it already contains the
stories-app and all the required modules.
Read Content Editor module - Installing for a deeper understanding of the dependencies between the content editor submodules.
To store new content items with your custom content editor, you can use
storiesworkspace provided by the
articlesworkspace provided by the
The Content editor and the Stories app don't yet support multi-language content.
Developing a custom content editor app is similar to creating a content app because it is also based on the
info.magnolia.ui.contentapp.ContentApp app class.
You can build your custom content editor app within a light module.
Here is an overview how to define a content editor app:
contentConnectoris using the
contentDefinitionwith the outline and the blocks section.
Create a YAML app descriptor.
Typically, you need at least the following two sub apps:
The editor subapp, which is a variant of the detail subapp. It implements content editor's
info.magnolia.editor.app.ContentEditorSubAppDescriptor class. (See also ContentEditorSubApp descriptor.)
The editor subapp must also implement the
of the Content Editor module.
actions: close: class: info.magnolia.editor.action.CloseContentEditorActionDefinition save: class: info.magnolia.editor.action.SaveContentActionDefinition saveAndPublish: class: info.magnolia.editor.action.SaveContentActionDefinition onSuccessAction: class: info.magnolia.ui.framework.action.ActivationActionDefinition command: activate
mgnl:compositionnodetype in the contentConnector
mgnl:composition nodetype for the
contentConnector property in the subapp descriptors of your content editor:
contentConnector: includeProperties: false workspace: <workspace-name> rootPath: / defaultOrder: jcrName nodeTypes: - icon: icon-node-content name: mgnl:composition strict: true - icon: icon-folder-l name: mgnl:folder strict: true
contentConnector: workspace: <workspace-name> nodeTypes: - icon: icon-node-content name: mgnl:composition strict: true - icon: icon-folder-l name: mgnl:folder strict: true
Instead of <workspace-name> use
articles or the name of your custom workspace.
contentDefiniton node to your editor subapp's descriptor and define in it what content is allowed (i.e. editable).
You must specify
outlineFields you define the static, structured information which you want on every content item.
The example below has the following properties:
This property defines the block types that are allowed.
blocks: - text - image
The Content Editor module comes with four predefined types of block you can use in your editor:
externalLink . You can also define your own content block(s).
Specifies what will be created as the initial, automatically added block when creating new content (or when no block is available).
Defines the block type which will be pre-selected by BlockPickerField.
Defines the app(s) whose resources you can link to from the
linkableApps: - pages - assets - contacts