richTextEditor 富文本编辑器

richTextEditor 组件支持用户创建和编辑富文本。

XML 元素

richTextEditor

Java 类

JmixRichTextEditor

概览

Rich text editor

基本用法

在线示例

在视图的 XML 中添加组件，默认提供一个用于对文本进行格式化的工具栏和一个内容编辑区域。除非设置为固定大小，否则组件将自动调整高度和宽度以适应用户输入的内容：

<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 设置为实例容器，将 property 设置为存储 HTML 内容的属性，可以将编辑器绑定到实体属性。在此示例中，控制器将实体加载到容器中，并且由于属性已经绑定，编辑器的内容与 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

XML 属性

下面是 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