richTextEditor

The richTextEditor component lets users create and edit HTML-formatted text.

XML Element

richTextEditor

Java Class

JmixRichTextEditor

Overview

Rich text editor

Basics

LIVE DEMO

Add richTextEditor to a view descriptor to provide a formatting toolbar and an editable content area. The component grows to fit its content unless you set an explicit size:

<richTextEditor id="richTextEditor" label="RichTextEditor" helperText="Helper text"/>

Toolbar Actions

The toolbar lets users apply bold, italic, underline, and strikethrough formatting; choose heading levels; add subscript or superscript; create ordered and bulleted lists; align content; insert images and links; add blockquotes and code blocks; and remove formatting.

HTML Content

LIVE DEMO

Use setValue() to populate the editor programmatically. The value can contain plain text or supported HTML markup; the following controller supplies formatted HTML after the view opens:

@ViewComponent
protected RichTextEditor richTextEditor;

@Subscribe
protected void onInit(InitEvent event) {
    richTextEditor.setValue("""
            <h1>H1</h1>
            <h2>H2</h2>
            <h3>H3</h3>
            <ul>
            <li><b>Bold</b></li>
            <li><i>Italic</i></li>
            <li><u>Underline</u></li>
            </ul>
            <ol>
            <li><s>Strikethrough</s></li>
            <li>Sub<sub>script</sub></li>
            <li>Super<sup>script</sup></li>
            <li><a href="https://www.jmix.io/" rel="nofollow">Link</a>
            </li>
            </ol>
            <pre>&lt;code-block/&gt;</pre>
            <blockquote>Blockquote</blockquote>
            """);
}

Data-aware richTextEditor

LIVE DEMO

Bind the editor to an entity attribute by setting dataContainer to an instance container and property to the attribute that stores the HTML content. In this example, the controller loads an entity into the container and the XML binding keeps the editor value synchronized with its description attribute:

XML
<data>
    <instance id="orderDc"
              class="io.jmix.uisamples.entity.Order"
              fetchPlan="_local"/>
</data>
<layout>
    <richTextEditor id="richTextEditor" label="Order description"
                    dataContainer="orderDc" property="description"/>
    <hbox>
        <span text="Value in the container:" css="flex-shrink: 0;"/>
        <span id="spanValue"/>
    </hbox>
</layout>
Java
@ViewComponent
protected InstanceContainer<Order> orderDc;
@ViewComponent
protected Span spanValue;

@Autowired
protected Metadata metadata;

@Subscribe
protected void onInit(View.InitEvent event) {
    Order order = metadata.create(Order.class);
    order.setDescription("""
            <h2>Order description</h2>
            <p><strong>Customer:</strong></p>
            <p><strong>Full name:</strong> John Doe</p>
            <p><strong>E-mail:</strong> j.doe@jmix.io</p>
            <p><br></p>
            <p><strong>Comment:</strong> Deliver as quickly as possible.</p>
            """);
    orderDc.setItem(order);
}

@Subscribe("richTextEditor")
protected void onRichTextEditorValueChange(ComponentValueChangeEvent<RichTextEditor, String> changeEvent) {
    spanValue.setText(orderDc.getItem().getDescription());
}

Theme Variants

LIVE DEMO

Use the themeNames attribute to change the editor’s appearance.

Variant Description Supported By

no-border

Removes the border around the editor.

Lumo

compact

Makes the toolbar more compact.

Lumo

Attributes

The following shared attributes are supported by richTextEditor:

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

Handlers

The following shared handlers are supported by richTextEditor:

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