Vaadin 24中tinymce-for-vaadin组件无法显示及Binder绑定疑问

问题描述 #

在Vaadin 24项目中使用tinymce-for-vaadin组件时，组件无法在表单中显示。表单布局为左侧列表，右侧包含一个MCE编辑器和一个原始文本域，除MCE字段外其他元素均正常显示，且无编译错误。

核心页面代码 #

@PageTitle("Rich Text")
@Route(value = "rich-text")
@RouteAlias(value = "")
public class AboutView extends VerticalLayout {
    
    @Autowired()
    private final SJNotifConfigDevDataService devDataService;

    Binder<SJNotifConfigDEV> binder = new BeanValidationBinder<>(SJNotifConfigDEV.class);
    VerticalLayout fieldView = new VerticalLayout();
    HorizontalLayout mainView = new HorizontalLayout();

    private Grid<SJNotifConfigDEV> grid;
    TextArea rawText = new TextArea("Raw Text");
    TinyMceField styledText = new TinyMceField("Styled Text (MCE)");
    
    public AboutView(SJNotifConfigDevDataService devDataService) {
        this.devDataService = devDataService;
        
        setSpacing(false);

        rawText.setHeight("400px");
        rawText.setWidth("800px");
        
        styledText.setHeight("400px");
        styledText.setWidth("800px");
        styledText.setContent("<p>Just a test</p>");

        fieldView.add(styledText, rawText);
        
        mainView.add(createGrid(),fieldView);
        mainView.setSizeFull();
        
        // 原始文本域绑定正常
        binder.forField(rawText).bind(SJNotifConfigDEV::getBody, SJNotifConfigDEV::setBody);
        
        // 不清楚如何绑定MCE字段
        //binder.forField(styledText).bind(SJNotifConfigDEV::getBody, SJNotifConfigDEV::setBody);

        H2 header = new H2("Rich Text Editor Test");
        header.addClassNames(Margin.Top.XLARGE, Margin.Bottom.MEDIUM);
        add(header);
        add(mainView);

        setSizeFull();
        setJustifyContentMode(JustifyContentMode.CENTER);
        setDefaultHorizontalComponentAlignment(Alignment.CENTER);
        header.getStyle().set("text-align", "center");
    }
    
    private Component createGrid(){
        grid = new Grid<>(SJNotifConfigDEV.class, false);
        // 网格初始化逻辑省略
        return grid;
    }
}

POM依赖配置 #

<!-- TEXT EDITOR -->
<dependency>
   <groupId>io.overcoded</groupId>
   <artifactId>tinymce-for-vaadin</artifactId>
   <version>23.3.3</version>
</dependency>

解决方案 #

一、组件不显示问题修复 #

1. 版本兼容调整：当前组件版本23.3.3适配Vaadin 23，但项目使用Vaadin 24，版本不匹配会导致组件无法渲染。需将组件版本升级到适配Vaadin 24的版本（如24.x.x系列），修改POM中的版本号即可。
2. 前端资源排查：打开浏览器开发者工具，查看Console是否有JS报错，Network标签是否存在TinyMCE相关资源加载失败的情况。若有资源加载问题，需确保项目依赖正确引入了组件的前端资源。
3. 布局调试：暂时移除mainView.setSizeFull()等布局尺寸强制设置，先让组件以默认尺寸渲染，确认显示正常后再调整布局样式。

二、Binder数据绑定配置 #

TinyMceField实现了Vaadin的HasValue接口，可直接使用Binder进行绑定，代码如下：

// 绑定MCE编辑器到实体的body属性
binder.forField(styledText)
      .bind(SJNotifConfigDEV::getBody, SJNotifConfigDEV::setBody);

需确保实体类SJNotifConfigDEV的getBody()方法返回String类型，setBody()方法接收String类型参数，绑定逻辑才能正常生效。

内容的提问来源于stack exchange，提问作者clickguy