Vaadin 24：tinymce-for-vaadin（Adam Belak 版本）

Question

我无法让tinymce编辑器（由Adam Belak - https://vaadin.com/directory/component/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();
        
        // set the binding
        binder.forField(rawText).bind(SJNotifConfigDEV::getBody, SJNotifConfigDEV::setBody);
        
        // NOT SURE how to set the binder for the MCE field
        //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);
        ...
          GRID CODE HERE
        ...

        return grid;
    }
}

这是 POM 依赖项：

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

Answer 1

我从来没能让它发挥作用。然而，另一个 TinyMCE 编辑器 (https://vaadin.com/directory/component/tinymce-for-flow) 工作得很好。

代码更改 - 旧代码：

TinyMceField styledText = new TinyMceField("Styled Text (MCE)");

新代码：

TinyMce styledText = new TinyMce();

将 POM 依赖项更改为：

<!-- TEXT EDITOR -->
<dependency>
    <groupId>org.parttio</groupId>
    <artifactId>tinymce-for-flow</artifactId>
    <version>4.0.2</version>
</dependency>

您还可以通过添加 JSON 字符串并设置字段的配置，使用 https://www.tiny.cloud/docs/configure/editor-appearance/ 中找到的所有选项来配置编辑器：

//String tmcoptions = "{\"branding\": false,\"menubar\": false,\"contextmenu\": false,\"toolbar\": false,\"statusbar\": false}";
String tmcoptions = "{\"resize\": false,\"statusbar\": false, \"menubar\": \"tools help\", \"branding\": false, \"plugins\" : \"link image code\",    \"toolbar\" : \"undo redo | styleselect | forecolor | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent | link image | code\" }";
styledText.setConfig(tmcoptions);

因为它是一个 WebComponent - 您也可以使用“正常”绑定：

// binder for the MCE field
binder.forField(styledText).bind(myClass::getBody, myClass::setBody);