java - 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 { ... }

要求:

• 您只想查看粗体、斜体、下标和上标文本的切换按钮，别无其他。
• 对于常规重新格式化，我重新启用了“删除格式”按钮。
• 我想，您还希望按钮重新向左对齐，没有任何间隙。

解决方案(在现代浏览器中工作):

更改/覆盖样式并为您的应用程序重新编译它们。

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 中为所有其他 PushButton 删除的前 PushButton 样式，重新启用“删除格式”PushButton。)

.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 并详细更改此内容，您当前需要处理样式。或者您尝试另一个提供为 Vaadin Addons 的 RichText/Wysiwyg 组件。 .