Question

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

常规
粗体
斜体
下标/上标

我找不到任何有关如何执行此操作的提示。除了一些＆gt;之外的信息。 4岁。

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

Answer 1

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

如果查看生成的vaadin样式，可以找到以＆＃34; .v-richtextarea .gwt-RichTextToolbar＆＃34;开头的样式。基于font-family＆＃34; ThemeIcons＆＃34; PushButtons和ToggleButton的定义如下：

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

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

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

<强>要求：

您只想看到粗体，斜体，下标和上标文本的切换按钮，没有别的。
对于常规重新格式化，我重新启用了按钮以取消＆＃34;删除格式＆＃34;。
我想，你也希望按钮重新对齐到左边，没有任何间隙。

解决方案（在现代浏览器中工作）：

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

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

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

2.。）禁用所有PushButtons

.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.）重新启用＆＃34;删除格式＆＃34; PushButton通过继承前2个中所有其他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组件。

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

1 个答案: