Rich text

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.

Property	Description	Example	Default
`alignment`	Text alignment for paragraphs. When set to `true`, this option adds alignment buttons (left, center, right, justify) in the toolbar.	`true`	`false`
`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: Magnolia default configuration file: `config-magnolia.js` CKEditor default configuration file: `config-default.js` 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`	-
`fontSizes`	List 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.	`500`	`300`
`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.	`true`	`false`
`lists`	Allows to add bulleted and numbered lists. When set to `false`, this removes list buttons from the CKEditor toolbar.	`true`	`true`
`source`	Allows toggling CKEditor to view/edit content as plain HTML. When set to `true`, adds a source button to the CKEditor toolbar.	`true`	`false`
`tables`	Allows adding tables. When set to `true`, this option adds a tables button in the CKEditor toolbar.	`true`	`false`

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

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.

Page tree

Rich text

Link buttons

Loading order for custom configuration