当contenteditable处于活动状态时如何在Vaadin Flow中获取div的内部html

Question

我对Vaadin Flow有问题。我想在自己的网站上创建一个简单的文本编辑器。我创建了一个简单的div组件，其元素属性contenteditable设置为true。在客户端，网站用户编辑div，并在按下按钮后，我希望在Java服务器端接收div的内部html。下面的代码不提供该功能。

Button button = new Button();
Div div = new Div();
div.getElement().setAttribute("contenteditable", "true");
button.setOnMouseClicked(event -> {
    System.out.println(div.getText());
});

我可以使用聚合物模板吗？请帮我解决这个问题。

Answer 1

可以使用div.getElement().setProperty("innerHTML", html);。如果使用此设置，请注意，设置innerHtml属性将更改元素的某些行为，它将不再管理其子元素。

  

“ innerHTML”属性对以下内容的后代结构有影响   元素。因此，设置“ innerHTML”属性会删除所有   孩子们。
  -from documentation

另一种可能性是div.getElement().getOuterHtml();，除了返回外部HTML。这里仍然值得一提。

在旁注中，您可能也对this editor component感兴趣。