java - Vaadin:限制可用的RichTextArea格式选项

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


定期
胆大
斜体
下标/上标


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

非常感谢您提供有关如何存档的帮助。谢谢！

最佳答案

该信息仍然正确，没有用于此要求的API。
您需要对RichTextArea样式进行一些更改。请参见Vaadin RichTextArea Docs。

如果查看生成的vaadin样式，则可以找到以“ .v-richtextarea .gwt-RichTextToolbar”开头的样式。基于字体家族“ ThemeIcons”，PushButton和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.）禁用特定的ToggleButtons：

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

5.）通过继承为2中所有其他按钮删除的先前的按钮样式，来重新启用“删除格式”按钮。

.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组件。