Text alignment for paragraphs. When set to true, this option adds
alignment buttons (left, center, right, justify) in the toolbar.
colors
optional
Colors displayed in the color selectors. Comma-separated a string of
hexadecimal color codes without the prefix, for example
00923E,F8C100,28166F. See
http://docs.ckeditor.com/!/api/CKEDITOR.config-cfg-colorButton_colors[CKEditor
documentation] for more.
configJsFile
optional
Location of a custom CKEditor configuration file,
e.g. /.resources/ckeditor/config-magnolia.js. You can link to a file
in the resources workspace, filesystem or classpath. See
Origins and loading order for more.
The default configuration files can be found in
magnolia-ui-framework/src/main/resources/mgnl-resources/ckeditor/
If you use a custom configuration file Magnolia will ignore
all the other configured properties.
A custom configuration allows you control over the
config.extraPlugins
setting, but also means you need to the magnolialink and
magnoliaFileBrowser plugins into your file. See the default
config-magnolia.js for how to include the plugins.
fonts
optional
List of font names displayed in the Font selector in the toolbar, for
example Arial/Arial,sans-serif;Times New Roman/Times New Roman,serif.
Separate entries with a semi-colon (;). 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. See
List of fonts size displayed in the Font selector in the toolbar, for
example 16/16px;24/24px;48/48px. Separate entries with a semi-colon
(;). 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. See
CKEditor
documentation for more.
height
optional, default is `300`
The height of the editing area, including the toolbar, for example
500. This configuration option accepts an integer (to denote a value
in pixels) or any CSS-defined length unit except percent (%) values.
images
optional, default is false
Allows images to be added 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.
lists
optional, default is true
Allows bulleted and numbered lists. When set to false, this option
removes list buttons from the toolbar.
source
optional, default is false
Allows toggling between text and HTML editing. When set to true, this
option adds a source button to the toolbar.
tables
optional, default is false
Allows tables to be added. When set to true, this option adds a tables
button in the toolbar.
validators
optional, default is info.magnolia.ui.form.validator.definition.SafeHtmlValidatorDefinition
Defines the field type via either a field alias name or a
fully-qualified field definition class name. See
Field
definition: Field types.
To check the correct form of the name, use the
Definitions app.
defaultValue
optional
Pre-filled default value displayed in the field. The value can be
overwritten by the user. Use alphanumeric characters.
Applied only when creating a new item, not for
already existing items.
description
optional
Help text displayed when the user clicks the help icon. The value can be
literal or retrieved from the
message bundle with
a key. Use alphanumeric characters in literal values. Not applicable to
the
static
field.
i18n
optional, default is false
Enables i18n
authoring support which allows editors to write foreign-language or
regionally targeted content. A two-letter language identifier (en, de,
fr etc.) is displayed on controls where i18n is set to true.
i18nBasename
optional, default is the message bundle defined in the dialog
definition_
Message bundle such
as com.example.messages for localized field labels. You can set this
property in the parent
dialog,
form
or tab definition. Child fields will inherit the bundle.
label
optional
Field label displayed to editors. The value can be literal such as
Product name or retrieved from the
message bundle with
a key such as products.product.label. Use alphanumeric characters in
literal values.
If you do not provide the property, Magnolia will fall back to a
generated i18n key and display the key in the UI.
If you do not want a label at all, define the property and set its value
to a blank space such as label: " " in YAML.
name
optional, default is the name of the field’s parent node_
Name of the node where the value is saved. The name jcrName is
reserved. Use alphanumeric characters.
placeholder
optional
Placeholder text to be displayed when the field is empty. The value is
i18n-able.
Makes the field uneditable. Adding this property has the same effect as
creating a
static
field.
required
optional, default is false
Makes the field required (mandatory). An asterisk is displayed next to
the field label. See also
Checking
for null values.
requiredErrorMessage
optional, default is This field is required
Error message displayed when required is true and the user saves an
empty field. The value can be literal or retrieved from the
message bundle with
a key such as validation.message.required.
styleName
optional
Adds one or more style names to this component. Multiple styles can be
specified as a space-separated list of style names such as
checkbox disabled. The style name will be rendered as an HTML class
name, which can be used in a CSS definition. The class name is added to
the field by calling the Vaadin method
addStyleName.
transformerClass
optional
Property transformer classes define how field values are stored in the
repository. Each field has a default transformer class. You don’t need
to define a class unless you want to override the default. The value is
a fully-qualified class name.
Complex field definitions may define a different default
transformer in their constructor. See
Transforming
field values for more.
type
optional, most fields set a default value automatically
JCR property type of the stored value such as String, Boolean,
Date or any other supported and defined data type.
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
Any configuration done in 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.
Decode text
CKEditor produces HTML such as <p> elements for paragraphs. However,
text stored in JCR usually escapes HTML code. To render text which
originates from a rich text field you need to decode the stored content
to make sure the HTML tags are rendered properly again.
Decode the content object and then get the desired property from it: