Vaadin：限制可用的 RichTextArea 格式选项

Question

我只想在 RichTextArea 中允许以下格式选项

常规
加粗
斜体
下标/上标

我找不到有关如何执行此操作的任何提示。除了一些超过 4 年的信息。

非常感谢任何有关如何存档的帮助。谢谢！

Answer 1

信息仍然正确，没有API这个要求。您需要对 RichTextArea 样式进行一些更改。参见 Vaadin RichTextArea Docs。

如果查看生成的 vaadin 样式，您可以找到以“.v-richtextarea .gwt-RichTextToolbar”开头的样式。基于字体系列 "ThemeIcons"，PushButtons 和 ToggleButton 定义如下：

.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Bold"] {
    content: "\f032";
}

要禁用按钮，需要使用 "display:none" 覆盖这些设置。为了避免像这样处理每个按钮，您可以更改 ToggleButton 和 PushButton 的样式：

.v-richtextarea .gwt-ToggleButton, .v-richtextarea .gwt-PushButton { ... }

要求:

您只想查看粗体、斜体、下标和上标文本的切换按钮，没有别的。
为了定期重新格式化，我重新启用了 "Remove Formatting" 的按钮。
我想，您还希望按钮重新向左对齐，没有任何间隙。

解决方案（适用于现代浏览器）：

Change/Override 样式并为您的应用程序重新编译它们。

1.) 禁用底部工具栏（包含下拉框）：

.gwt-RichTextToolbar-bottom { display: none; }

2.) 禁用所有按钮

.v-richtextarea .gwt-PushButton {
    display:none;
}

3.) 不要更改粗体、斜体、下标和上标所需的切换按钮；原始设置为：

.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Bold"]:before {
    content: "\f032";
}
.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Italic"]:before {
    content: "\f033";
}
.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Subscript"]:before {
    content: "\f12c";
}
.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Superscript"]:before {
    content: "\f12b";
}

4.) 禁用特定的切换按钮：

.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Underline"] {
    display:none;
}
.v-richtextarea .gwt-RichTextToolbar-top div[title="Toggle Strikethrough"] {
    display:none;
}

5.) 通过继承在 2 中为所有其他按钮删除的前按钮样式重新启用 "Remove Formatting" 按钮。)

.v-richtextarea .gwt-RichTextToolbar-top div[title="Remove Formatting"] {
    content: "\f12d";
    display: inline-block;
    line-height: 37px;
    width: 37px;
    text-align: center;
    outline: none;
}

如果您想使用内置的 RichTextArea 并详细更改这些内容，您目前需要处理样式。或者您尝试另一个 RichText/Wysiwyg 组件作为 Vaadin Addons.

Vaadin：限制可用的 RichTextArea 格式选项

Vaadin: restrict available RichTextArea format options

java

vaadin