richTextEditor

Компонент richTextEditor позволяет создавать и редактировать текст в формате HTML.

XML-элемент

richTextEditor

Java-класс

JmixRichTextEditor

Обзор

Редактор расширенного текста

Основы

ДЕМО

Добавьте richTextEditor в дескриптор экрана, чтобы вывести панель форматирования и редактируемую область содержимого. Если размер не задан явно, компонент увеличивается по размеру содержимого:

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

Действия на панели инструментов

Панель инструментов позволяет применять полужирное, курсивное, подчёркнутое и зачёркнутое начертание, выбирать уровень заголовка, добавлять нижний и верхний индекс, создавать нумерованные и маркированные списки, выравнивать содержимое, вставлять изображения и ссылки, добавлять цитаты и блоки кода, а также удалять форматирование.

HTML-ввод

ДЕМО

Используйте setValue(), чтобы программно заполнить редактор. Значение может содержать обычный текст или поддерживаемую HTML-разметку. Следующий контроллер передаёт форматированный HTML после открытия экрана:

@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>
            """);
}

richTextEditor связанный с данными

ДЕМО

Чтобы связать редактор с атрибутом сущности, укажите контейнер экземпляра в dataContainer, а атрибут с HTML-содержимым — в property. В примере контроллер загружает сущность в контейнер, а привязка в XML синхронизирует значение редактора с атрибутом description:

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());
}

Варианты темы

ДЕМО

Используйте атрибут themeNames, чтобы настроить внешний вид компонента.

Вариант Описание Поддерживается в

no-border

Удаляет границу вокруг редактора.

Lumo

compact

Делает панель инструментов более компактной.

Lumo
Используйте оба варианта оформления одновременно, чтобы получить компактный редактор без границ.

Атрибуты

richTextEditor имеет следующие общие атрибуты:

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

Обработчики

richTextEditor имеет следующие общие обработчики:

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