Enhanced Rich Text Editor
Enhanced Rich Text Editor for Flow is an extended version of Vaadin Rich Text Editor
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 Button
s 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
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Repalce deprecated executeJavaScript call in Vaadin24
- Released
- 2024-01-30
- Maturity
- EXPERIMENTAL
- License
- CVAL 3.0
Compatibility
- Framework
- Vaadin 23
- Vaadin 24
- Vaadin 10+ in 1.0.4
- Vaadin 14+ in 2.0.0
- Browser
- N/A
Enhanced Rich Text Editor - Vaadin Add-on Directory
Enhanced Rich Text Editor for Flow is an extended version of Vaadin Rich Text EditorOnline Demo
Enhanced Rich Text Editor version 1.0.4
Enhanced Rich Text Editor version 1.1.0
- Added read only button
- Fixed setting tabstop in the middle of 2 tabstops
Enhanced Rich Text Editor version 1.2.0
Added API for manipulating readonly buuton in toolbar
Enhanced Rich Text Editor version 2.0.0
### Version
- Compatible with Vaadin 14 compatibility and npm mode
Enhanced Rich Text Editor version 2.1.0
### Version 2.1.0
- Added placeholder feature
Enhanced Rich Text Editor version 2.2.0
### Version 2.2.0
- Add Java API for the essential placeholder events
Enhanced Rich Text Editor version 2.2.1
### Version 2.2.1
- Fix typos in naming of the new API
- Add the new buttons to ToolbarButton enum
Enhanced Rich Text Editor version 2.2.2
### Version 2.2.2
- Updated the web component and the add-on to support multiple placeholders in deletion
Enhanced Rich Text Editor version 2.2.3
### Version 2.2.3
- Fix PlaceHolderSelectedEvent getPlaceholders
- Added addPlaceholderLeaveListener
Enhanced Rich Text Editor version 2.2.4
### Version 2.2.4
- Implementing Focusable
Enhanced Rich Text Editor version 2.3.0
### Version 2.3.0
- Fixed Delete key not triggering delete event
- Fixed Ctrl-Z, Undo/Redo buttons not triggering correct events
- Refactorized insertion event behavior
Enhanced Rich Text Editor version 2.4.0
### Version 2.4.0
- Added support for custom buttons.
- Added API to add text programmatically.
Enhanced Rich Text Editor version 2.4.1
### Version 2.4.1
- Updated the web component for small fixes
Enhanced Rich Text Editor version 2.4.2
### Version 2.4.2
- Fix issue with scrollbar not appearing correctly when using setMaxHeight.
Enhanced Rich Text Editor version 2.4.3
Fixed an outdated javascript import, which led to a client side error. Also updated the used Vaadin version to the latest 14.7.5.
Enhanced Rich Text Editor version 2.4.4
### New Features
* Support for custom shortcuts.
Enhanced Rich Text Editor version 2.4.5
Replace deprecated method to avoid compatibility issue when using the component in a Vaadin 23 application.
Enhanced Rich Text Editor version 2.5.0
#### New features:
- New justify align button. (In order to keep all the alignment buttons with a similar style, the icons in them are now vaadin-icons)
- New indent/deindent buttons.
Enhanced Rich Text Editor version 2.5.1
#### New features:
* Update web component version to 1.5.1 to replace use icons for alignment, indent and readonly buttons (use svg icons instead of vaadin-icons).
Enhanced Rich Text Editor version 3.0.0
New version compatible with Vaadin 23.3/24
Enhanced Rich Text Editor version 3.0.1
#### Bug fixes:
* fix arrows navigations after toolbar focus with custom shortcut
Enhanced Rich Text Editor version 4.0.0
#### New features:
* Update of web-component version to 3.0.0 to get new features:
- fix to arrow keys navigation: was not working when navigation reached hidden buttons,
- make each toolbar standard button to include a slot for the icon, so icons can be replaced easily if wanted with a new Icon.
* New API for Icon replacement of toolbar standard buttons.
* Version has been upgraded to 4.0.0 as changes in web-component are considered breaking as they include styling changes that might affect styling applied to buttons.
Enhanced Rich Text Editor version 4.0.1
* Update web-component version to 3.0.1 to include fix to make arrow keys navigation on toolbar to include custom buttons
Enhanced Rich Text Editor version 4.0.2
#### New feature:
* new feature to hide rulers
Enhanced Rich Text Editor version 4.0.3
* Repalce deprecated executeJavaScript call in Vaadin24