java - 如何在 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”属性会删除所有子元素。
--来自文档

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

在旁注中，您可能还对这个编辑器组件感兴趣。