Enhanced Rich Text Editor

Enhanced Rich Text Editor for Flow is an extended version of Vaadin Rich Text Editor

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

Usage

Enhanced Rich Text Editor for Flow is an extended version of Vaadin Rich Text Editor with more functionalities like tab-stops, non-breaking space, rulers, customizing toolbar buttons and read-only sections.

Tabstops

Tabstops can be set in UI by clicking on horizontal ruler, on top of the editor. There are 3 tabstop possible directions: Left, Right and Middle.

• When Direction set to Left: then left side of text will be aligned to right side of tab stop (>text)
• When Direction set to Right: then right side of text will be aligned to left side of tab stop (text<)
• When Direction set to Middle: then text will be centered to tab stop (te|xt)

When you click on ruler left tabstop will appear, then if you click on left tabstop it will change to right tabstop, and if you click on right tabstop it will change to middle tabstop. It is also possible to set tabstops programmatically by using tabStops property of editor.

Non-breaking space

To add a non-breaking space where the caret is located, press shift+space.

Customizing toolbar buttons

You can use setToolbarButtonsVisibility to show/hide the toolbar buttons. For example, the following piece of code hides Image and Link buttons.

Adding custom toolbar buttons

Instantiate normal Buttons and use rte.addCustomButtons(button1,button2,...); to add them to editor's toolbar.

Placeholders

See demo for more details.

Icon replacement

Since version 4.0.0, each toolbar standard button includes a slot for the icon, so icons can be replaced easily. See example.

Client-side implementation

This is the server-side (Java) API for Vaadin Platform for the vcf-enhanced-rich-text-editor component. Looking for the client-side version? It can be found here: https://vaadin.com/directory/component/vaadin-component-factoryvcf-enhanced-rich-text-editor

Vaadin Pro

This component is available in the Vaadin Pro subscription. It is still open source, but you need to have a valid CVAL license in order to use it. Read more at: Pricing

Sample code

EnhancedRichTextEditor rte = new EnhancedRichTextEditor();
List<TabStop> tabStops = new ArrayList<>();

tabStops.add(new TabStop(TabStop.Direction.LEFT, 150));
tabStops.add(new TabStop(TabStop.Direction.RIGHT, 350));
tabStops.add(new TabStop(TabStop.Direction.MIDDLE, 550));

rte.setTabStops(tabStops);

TextArea valueBlock = new TextArea();
EnhancedRichTextEditor rte = new EnhancedRichTextEditor();
Button saveBtn = new Button("Save value", e -> valueBlock.setValue(rte.getValue()));
Button setBtn = new Button("Set value", e -> rte.setValue(valueBlock.getValue()));

EnhancedRichTextEditor rte = new EnhancedRichTextEditor();
Map<EnhancedRichTextEditor.ToolbarButton, Boolean> buttons = new HashMap<>();
buttons.put(EnhancedRichTextEditor.ToolbarButton.CLEAN, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.BLOCKQUOTE, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.CODE_BLOCK, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.IMAGE, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.LINK, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.STRIKE, false);
rte.setToolbarButtonsVisibility(buttons);

rte.setValue("[" +
        "{\"insert\":\"Some text\\n\"}," +
        "{\"insert\":{\"readonly\":\"Some readonly text\\n\"}}," +
        "{\"insert\":\"More text\\n\"}," +
        "{\"insert\":{\"readonly\":\"More readonly text\\n\"}}]");

EnhancedRichTextEditor rte = new EnhancedRichTextEditor();
Map<EnhancedRichTextEditor.ToolbarButton, Boolean> buttons = new HashMap<>();
buttons.put(EnhancedRichTextEditor.ToolbarButton.CLEAN, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.BLOCKQUOTE, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.CODE_BLOCK, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.IMAGE, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.LINK, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.STRIKE, false);
buttons.put(EnhancedRichTextEditor.ToolbarButton.READONLY, false);
rte.setToolbarButtonsVisibility(buttons);

EnhancedRichTextEditor rte = new EnhancedRichTextEditor();

Button textButton1 = new Button("");
textButton1.setIcon(VaadinIcon.AIRPLANE.create());
textButton1.addClickShortcut(Key.F8);
textButton1.getElement().setProperty("title", "Airplanes are flying machines.");
textButton1.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
textButton1.addClickListener(event -> {
    rte.addText("Airplanes are flying machines. ");
});

Button textButton2 = new Button("");
textButton2.setIcon(VaadinIcon.DENTAL_CHAIR.create());
textButton2.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
textButton2.getElement().setProperty("title", "Dentists are drilling people.");
textButton2.addClickShortcut(Key.F9);
textButton2.addClickListener(event -> {
    rte.addText("Dentists are drilling people. ");
});

rte.addCustomButtons(textButton1,textButton2);

/* since version 4.0.0 */

EnhancedRichTextEditor rte = new EnhancedRichTextEditor();

Icon newUndoIcon = new Icon(VaadinIcon.ARROW_BACKWARD);
newUndoIcon.setColor("grey");
newUndoIcon.setSize("1.25em");
rte.replaceStandardToolbarButtonIcon(ToolbarButton.UNDO, newUndoIcon);

Icon newRedoIcon = new Icon(VaadinIcon.ARROW_FORWARD);
newRedoIcon.setColor("grey");
newRedoIcon.setSize("1.25em");
rte.replaceStandardToolbarButtonIcon(ToolbarButton.REDO, newRedoIcon);

Links

• View on GitHub
• Online Demo

Compatibility