richTextEditor

LIVE DEMO

An area to input text with rich formatting. It supports a variety of formatting options such as bold, italics, underlining, text alignment along with adding links, images, code blocks and more, to make text visually appealing and well-structured.

XML element: richTextEditor
Java class: RichTextEditor

Basics

To add the component on a view, place it in the view descriptor:

<richTextEditor id="richTextEditor"/>

Users can type and edit text using the tools in the top bar.

HTML Input

In addition to user input, text can also be programmatically entered into the component. This can be plain text or text formatted with standard HTML tags.

@ViewComponent
private RichTextEditor richTextEditor;
@Subscribe
public void onInit(final InitEvent event) {
    richTextEditor.setValue("<i>Jackdaws </i><u>love</u> " +
            "my <b>big</b> <sup>sphinx</sup> of " +
            "<span style=\"background-color:red;\">quartz</span>");
}

Data Binding

LIVE DEMO

The component can display the content of an entity’s attribute, which may be plain text or text formatted with standard HTML tags.

To bind richTextEditor to an entity attribute:

Set the name of the data container to as the dataContainer attribute value.
Set the name of an attribute as the property attribute value.

Attributes

id - alignSelf - ariaLabel - ariaLabelledBy - classNames - colspan - css - dataContainer - enabled - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - themeNames - valueChangeMode - visible - width

Handlers

AttachEvent - DetachEvent - ComponentValueChangeEvent - CompositionStartEvent - CompositionUpdateEvent - CompositionEndEvent - KeyDownEvent - KeyPressEvent - InputEvent

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).