如何在 vaadin 标签上添加 html 格式？答案

【问题标题】：How to add html format on a vaadin label?如何在 vaadin 标签上添加 html 格式？
【发布时间】：2020-05-18 00:36:22
【问题描述】：

我想在 vaadin 标签上添加一个 html 格式的字符串。该字符串来自数据库并直接进入标签，它必须使用粗体文本、换行符和其他一些花哨的文本进行格式化。我找到了几个解决方案，但这些都是针对旧版本的 vaadin，有没有办法在 vaadin flow 上做到这一点？

【问题讨论】：

无论您做什么，请记住注意输出清理以降低 XSS 漏洞的风险。使用 Vaadin 时，您的类路径中有 JSoup，因此您可以使用 Jsoup.clean 方法来执行此操作。
HTML 字符串来自我的数据库，由我添加...我不会让用户添加 HTML 格式的自定义文本，所以我想目前没有漏洞？但是当我接受自定义 HTML 输入时，我绝对应该补充一点，对吗？
没错。挑战在于，如果您授予可能不受信任的用户向数据库的该部分提交内容的权限，请记住稍后添加清理。因此，我通常建议立即进行。

标签： html string text label vaadin

【解决方案1】：

您可以使用以下方法将 HTML 内容添加到标签：

        Label label = new Label();
        label.getElement().setProperty("innerHTML","A new line should be created after this <br /> <b>This text is bold</b> <br /> <i> This text is italic</i>");
        add(label);

但是，如果您只想显示文本，那么标签不是要使用的正确元素。如其API 所述：

请注意，标签组件不适用于页面中的松散文本 - 它们应该通过使用 setFor(Component) 或通过使用 HasComponents.add(Component...) 方法将它们添加到另一个组件来与另一个组件耦合。

我会改用HTML 元素：

        String yourContent ="A new line should be created after this <br /> <b>This text is bold</b> <br /> <i> This text is italic</i>";
        Html html = new Html("<text>" + yourContent + "</text>");
        add(html);

输出：

或者您可以封装该功能并创建一个通用组件，用于显示基于此处的示例的 HTML sn-ps：https://vaadin.com/forum/thread/17072019

【讨论】：

谢谢你！使用 HTML 元素正是我想要的，干杯！