RichTextFieldDefinition  renders a rich text editor. This is a custom Magnolia field that implements the CKEditor component.

Class: info.magnolia.ui.form.field.definition.RichTextFieldDefinition

Here is the generic rich text field definition from the Standard Templating Kit. It is used in the stkTextImage component in the Pages app.

Node name














You can use all common field properties and the following. Some of these features require at least Magnolia 5.2.2. 


Text alignment for paragraphs. When set to true, this option adds alignment buttons (left, center, right, justify) in the toolbar.


Colors displayed in the color selectors. Comma-separated a string of hexadecimal color codes without the # prefix.

CKEditor documentation


Location of a custom CKEditor configuration file. You can link to a file in the resources workspace or in the classpath.

Starting with 5.3.4 we provide the following configurations:

(warning) The custom configuration file will make Magnolia ignore all other configured properties.

If you use a custom configuration files you have control over the config.extraPlugins setting. This means you are in charge of adding the magnolialink and magnoliaFileBrowser plugins into your file. The default config-magnolia.js shows how to include the plugins.


List of font names displayed in the Font button in the toolbar. Entries are separated by semi-colons (;). It's possible to have more than one font for each entry separated by comma.

A display name may be optionally defined by prefixing the entries with the name and the slash character.

CKEditor documentation

Arial/Arial,sans-serif;Times New Roman/Times New Roman,serif-
fontSizesList of fonts size displayed in the Font button combo in the toolbar. Entries are separated by semi-colons (';').

Any CSS-supported size can be used: 12px, 2.3em, 130%, larger or x-small.

A display name may be optionally defined by prefixing the entries with the name and the slash character. For example, Bigger Font/14px will be displayed as Bigger Font in the list, but will be outputted as 14px.

CKEditor documentation


The height of the editing area that includes the editor content. This configuration option accepts an integer (to denote a value in pixels) or any CSS-defined length unit except percent (%) values.

Users can expand the editor content area to the full height of the container, typically a subapp.


Allows adding images from the DAM. When set to true, this option adds an image button in the toolbar. A user can define the size and alignment of the image and some metadata.


Allows to add bulleted and numbered lists. When set to false, this removes list buttons from the CKEditor toolbar.


Allows toggling CKEditor to view/edit content as plain HTML. When set to true, adds a source button to the CKEditor toolbar.

tablesAllows adding tables. When set to true, this option adds a tables button in the CKEditor toolbar.truefalse

For a change history see CKEditor integration in Magnolia 5.

Link buttons

There are three link buttons:

  •  Links to external pages
  •  Links to internal pages
  •  Links to documents in the DAM

Loading order for custom configuration

(warning) Note that any configuration done in a  RichTextFieldFactory will override configuration settings from the config.js file. This is why we ignore other properties in the field definition as soon as a configJsFile is configured.


#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))