Rich text editor

Renders a rich text editor.

Node name : rich-text-editor

Attributes

Bound

Attribute	Type	Required	Default value	Description
property-name	`string`	`true`		UI view property name
item	UI view	`false`	`@DatasourceCurrent`	Item to be bound to

Unbound

Attribute	Type	Required	Default value	Description
value	`string`	`true`		Input value.
label	`string`	`false`		Input label.
readonly	`bool`	`false`	`false`	Value indicating whether the input is read-only.
required	`bool`	`false`	`false`	Value indicating whether the input is required.
message-text	`string`	`false`		Additional message displayed next to the component. Usually a warning or an error message.
message-severity	`string` (`information`, `warning`, `error`)	`false`		Severity of the additional message displayed next to the component.
documentation	`string`	`false`		Documentation
tab-stop	`bool`	`false`	`true`	Value indicating whether the input can be focused using the `Tab` key.
value-changed	`string`	`false`		Name of the method called when the value has changed. The first parameter is the value and the second is the current item of the data source (`DatasourceCurrent`) or the iterated item in a `repeat` component.

Common

Attribute	Type	Required	Default value	Description
label-position	`string` (`top`, `left`, `right`, `hidden`)	`false`	`top`	Input label position.
message-position	`string` (`bottom`, `hidden`)	`false`	`bottom`	Input message position.
focused	`bool`	`false`	`false`	Value indicating whether the component is focused.
toolbar	`string`	`false`	bold italic underline strikethrough \| fontfamily fontsize blocks \| alignleft aligncenter alignright alignjustify \| outdent indent \| numlist bullist \| forecolor backcolor removeformat \| table image link \| code \| preview fullscreen \| speech \| customActions	List of the buttons to include in the toolbar of the rich text editor. See this article for more information.
height	`number` or `fill`	`false`	`500`	Height of the input. A numeric value is translated in pixels. `fill` makes the component take all the available height.
custom-actions	`System.Collections.Generic.IEnumerable<GroupeIsa.Neos.Designer.UIAbstractions.RichTextEditorCustomAction>`	`false`	`[]`	Custom actions to add to the rich text editor toolbar. More information.
content-css	`string`, `string[]`	`false`		One or an array of CSS file URL to apply to the content rendered in the rich text editor.
content-style	`string`	`false`		A string that contains CSS to apply to the content rendered in the rich text editor.
editor-options	`object`	`false`		Options passed to the `init` function of the TinyMCE editor.

Custom actions

Custom actions allow you add additional buttons in the toolbar of a rich text editor.
They can be defined as a list of GroupeIsa.Neos.Designer.UIAbstractions.RichTextEditorCustomAction in a field or a computed of a UI view or UI component. They must be bound to the custom-actions attribute.

A custom action is defined by :

an Action to execute when the user clicks on the button
an optional Caption to display on the button
an optional Icon to display on the button
an optional Tooltip to display when hovering the mouse over the button (not displayed when the caption is set)

The list of available icons can be found here. Use the identifier.

When the list of RichTextEditorCustomAction bound to custom-actions contains only one action, the button of the action is directly displayed in the toolbar of the rich text editor.
When the list contains multiple RichTextEditorCustomAction, a ... menu button is displayed. Clicking it displays the custom action buttons.

Warning

Custom actions are not visible when attribute toolbar does not include customActions.

Examples

Bound

<rich-text-editor property-name="Notes" />

Unbound

<rich-text-editor value="@Fields.Comment" label="myLabel" readonly="true" required="true" />

This example show how to remove and reorganize buttons from the toolbar of the rich text editor.

<rich-text-editor property-name="Notes" toolbar="alignleft alignright | aligncenter  alignjustify | bold italic underline" />

This example shows how to declare and bind two custom actions to a rich text editor.
This assumes that a field of type System.Collections.Generic.List<GroupeIsa.Neos.Designer.UIAbstractions.RichTextEditorCustomAction> exists in the UI view.

Template:

<rich-text-editor property-name="Notes" custom-actions="@Fields.CustomActions" />

Initialized event rule:

Fields.CustomActions.Add(new RichTextEditorCustomAction()
{
    // UIResources.Sales.LastSaleTitle (Scope=Frontend) => "Last Sale"
    // UIResources.Sales.LastSaleMessage (Scope=Frontend) => "We have sold a microwave!"
    Action = () => ShowToast(MessageType.Info, UIResources.Sales.LastSaleTitle, UIResources.Sales.LastSaleMessage),
    Icon = "comment",
    Tooltip = Resources.Sales.ShowLastSale
});
Fields.CustomActions.Add(new RichTextEditorCustomAction()
{
    Action = () => Methods.UpdateProduct(),
    Caption = Resources.Sales.UpdateProduct
});

Custom TinyMCE options

This example shows how to pass custom options to the init function of the TinyMCE editor.
This assumes that a field of type object exists in the UI view.