CODEWITHSUNDEEP
javavaadin
Julian Pieles
Julian Pieles

Reputation: 4016

Vaadin: restrict available RichTextArea format options

I would like to only allow the following format options in a RichTextArea

I can't find any hints on how to do this. Except some information which is > 4 years old.

Any help on how to archive this is highly appreciated. Thanks!

Upvotes: 0

Views: 806

Answers (1)

jforge
jforge

Reputation: 176

The information is still correct, there is no API for this requirement. You need to make some changes to the RichTextArea styles. See Vaadin RichTextArea Docs.

If you look at the generated vaadin styles, you can find styles beginning with ".v-richtextarea .gwt-RichTextToolbar". Based on the font-family "ThemeIcons" the PushButtons and ToggleButton are defined like this:

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

To disable buttons, these settings need to be overridden with "display:none". To avoid every single button to be handled like this, you can change the style for ToggleButton and PushButton:

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

Requirements:

  • You just want to see the Toggle Buttons for Bold, Italic, Subscript and Superscript text, nothing else.
  • For Regular re-formatting, I re-enabled the Push Button for "Remove Formatting".
  • I suppose, you also want the buttons re-aligned to the left without any gaps.

Solution (working in modern browsers):

Change/Override the styles and recompile them for your application.

1.) Disable the bottom Toolbar (containing the dropdown boxes):

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

2.) Disable all PushButtons

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

3.) Do not change the required Toggle Buttons for Bold, Italic, Subscript and Superscript; the original settings are:

.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.) Disable specific ToggleButtons:

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

5.) Re-enable the "Remove Formatting" PushButton by inheriting the former PushButton style removed for all other PushButtons in 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;
}

If you want to work with the built-in RichTextArea and change this stuff in detail you currently need to cope with the styles. Or you try another RichText/Wysiwyg component offered as Vaadin Addons.

Upvotes: 3

Related Questions