Magnolia 5.3 reached end of life on June 30, 2017. This branch is no longer supported, see End-of-life policy.

Page tree
Skip to end of metadata
Go to start of metadata

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

Value

 text

 

 class

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

 i18n

true

 i18nBasename

info.magnolia.module.templatingkit.messages

 label

dialogs.generic.controls.text.label

 tables

true

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

PropertyDescriptionExampleDefault
alignment

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

truefalse
colors

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

CKEditor documentation

00923E,F8C100,28166F-
configJsFile

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.

/.resources/ckeditor/config-magnolia.js-
fonts

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

16/16px;24/24px;48/48px-
height

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.

500300
images

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.

truefalse
lists

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

truetrue
source

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

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