-
Notifications
You must be signed in to change notification settings - Fork 63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
RichTextEditor: add support for hiding toolbar buttons #6298
Comments
Hiding these buttons is already doable with CSS e.g. using vaadin-rich-text-editor::part(toolbar-group-block),
vaadin-rich-text-editor::part(toolbar-group-rich-text),
vaadin-rich-text-editor::part(toolbar-group-glyph-transformation) {
display: none;
} |
True, but with Vaadin 23 that would require injecting styles into ShadowDOM of RichTextEditor; also I would have to create a css class for every combination of toolbar button that I'm using in my app. |
These part names are also available for RTE in Vaadin 23 so style injection should not be necessary |
Solved via this Java code: public class Utils {
public enum RichTextEditorToolbarButton {
UNDO("btn-undo"),
REDO("btn-redo"),
BOLD("btn-bold"),
ITALIC("btn-italic"),
UNDERLINE("btn-underline"),
STRIKE("btn-strike"),
H1("btn-h1"),
H2("btn-h2"),
H3("btn-h3"),
SUBSCRIPT("btn-subscript"),
SUPERSCRIPT("btn-superscript"),
OL("btn-ol"),
UL("btn-ul"),
LEFT_ALIGN("btn-left"),
CENTER_ALIGN("btn-center"),
RIGHT_ALIGN("btn-right"),
IMAGE("btn-image"),
LINK("btn-link"),
BLOCKQUOTE("btn-blockquote"),
CODE("btn-code"),
RESET_FORMATTING("btn-clean");
RichTextEditorToolbarButton(String javaScriptButtonId) {
this.javaScriptButtonId = javaScriptButtonId;
}
public final String javaScriptButtonId;
}
public static void setVisibleToolbarButtons(RichTextEditor rte, EnumSet<RichTextEditorToolbarButton> buttons) {
final List<String> visibleButtonIDs = buttons.stream().map(it -> it.javaScriptButtonId).collect(Collectors.toList());
final JsonArray array = Json.createArray();
for (int i = 0; i < visibleButtonIDs.size(); i++) {
array.set(i, visibleButtonIDs.get(i));
}
rte.getElement().executeJs("Array.from(this._toolbar.getElementsByTagName(\"button\")).forEach(btn => btn.style.display = ($0.includes(btn.id) ? \"\" : \"none\"))", array);
}
} |
Describe your motivation
I want to severely limit the amount of formatting which the user can input via the toolbar buttons (e.g. I want to hide the code, subscript, superscript, image and link buttons). There looks to be no server-side API in RichTextEditor 23.4.0 to do that.
Describe the solution you'd like
setVisibleToolbarButtons(EnumSet<ToolbarButton>)
would be great to have.Describe alternatives you've considered
No response
Additional context
No response
The text was updated successfully, but these errors were encountered: