CKEditorVaadin
CKEditor 5 and Vaadin, rich text editor including multiple functionalities
An integration of CKEditor 5 and Vaadin.
- Version 1.. and 2.. are compiled by Java 11.
- From version 3, the component is compiled by Java 17.
- From version 4, the component is compiled by Java 21.
Items that available in toolbar, you can select some/all of them.
-------------------------- | -------------------------- | -------------------------- |
---|---|---|
heading | pipe line | block quote |
font family | font color | font size |
font background | bold | italic |
image upload | indent | outdent |
link | numbered list | bulleted list |
media embed | undo | redo |
underline | superscript | code |
subscript | strikethrough | remove format |
horizontal line | page break | special characters |
alignment | code block | highlight |
todo list | insert table | export to pdf |
export to word | html embed | find and replace |
source edit | minimap | pagination |
set license key | text part language | auto image |
mention | source code | auto save |
line height | show block | |
-------------------------- | -------------------------- | -------------------------- |
Note: export to pdf and export to word are CKEditor Premium Features. You need to pay to use after 30 days free trial.
Features
- i18n
- Dark mode
- Autosave action
- Custom action registration
- Configuration
- Insert text to the cursor's position
Next enhancements
- bug fixes
Future enhancements
- theme on Lumo & Material
Please feel free to post issues regarding to the addon on github.
Note: Remember to whitelist 'com.wontlost' in your application.properties
vaadin.whitelisted-packages = com.wontlost
Your donation will make the addon much better, thanks for all your support.
Sample code
/**Classic Editor*/ VaadinCKEditor classicEditor = new VaadinCKEditorBuilder().with(builder -> { builder.editorData = "<p>This is a classic editor sample.</p>"; builder.editorType = EditorType.CLASSIC; builder.theme = ThemeType.DARK; }).createVaadinCKEditor();
/**Balloon Editor*/ VaadinCKEditor balloonEditor = new VaadinCKEditorBuilder().with(builder->{ builder.editorType=EditorType.BALLOON; builder.editorData="Balloon Editor test"; }).createVaadinCKEditor();
/**Inline Editor*/ VaadinCKEditor inlineEditor = new VaadinCKEditorBuilder().with(builder->{ builder.editorType=EditorType.INLINE; builder.editorData="Inline"; }).createVaadinCKEditor();
/**Document Editor*/ VaadinCKEditor decoupledEditor = new VaadinCKEditorBuilder().with(builder->{ builder.editorType=EditorType.DECOUPLED; builder.editorData="Dcoupled Editor"; }).createVaadinCKEditor();
/**Set Editor Content*/ editor.setValue("New Content");
editor.setLabel("Comment"); editor.setRequiredIndicatorVisible(true);
/**Use Binder*/ Message message = new Message(); message.setContent(null); Binder<Message> binder = new Binder<>(Message.class); Binder.Binding<Message, String> binding = binder.forField(classicEditor) .withValidator(content->content!=null && content.length()>0, "Empty is not allowed") .withValidator(content->content!=null && content.length()<20, "Too many words") .bind(Message::getContent, Message::setContent); binder.setBean(message); binder.readBean(message); editor.addValueChangeListener(event -> { editor.setErrorMessage(null); binding.validate(); //update validation status on value changes }); /**clear editor content with binder*/ binder.readBean(null);
Toolbar[] toolbar = new Toolbar[] {Toolbar.fontFamily, Toolbar.fontSize, Toolbar.fontColor, Toolbar.imageUpload, Toolbar.htmlEmbed}; Config config = new Config(); config.setEditorToolBar(toolbar); config.setPlaceHolder("Here is a place holder"); config.setUILanguage(Language.zh_cn); VaadinCKEditor classicEditor = new VaadinCKEditorBuilder().with(builder -> { builder.config = config; }).createVaadinCKEditor();
VaadinCKEditorAction.registerAction(VaadinCKEditorAction.AUTOSAVE, new AutosaveAction() { @Override public void accept(String editorId, String editorData) { System.out.println("My new save action"); } });
Config config = new Config(); config.setWproofReaderCloud();//For cloud server config.setWproofReaderServer();//For self hosted server VaadinCKEditor classicEditor = new VaadinCKEditorBuilder().with(builder -> { builder.config = config; }).createVaadinCKEditor();
Config config = new Config(); config.enablePagination(); config.setPaginationA4(); // premium feature which needs a license config.enableMinimap(); // for minimap feature config.setLicenseKey("your license key"); VaadinCKEditor editor = new VaadinCKEditorBuilder().with(builder -> { builder.editorData = "<p>This is a document editor example.</p>"; builder.editorType = EditorType.DECOUPLED; builder.minimap = true; builder.config = config; }).createVaadinCKEditor(); add(editor);
MentionFeed mentionFeed = new MentionFeed(); List<MentionFeed> mentionFeeds = new ArrayList<>(); List<MentionFeedItem> mentionFeedItems = new ArrayList<>(); MentionFeedItem mentionFeedItem = new MentionFeedItem(); mentionFeedItem.setId("@Ryan"); mentionFeedItem.setText("@Ryan Pang"); mentionFeedItems.add(mentionFeedItem); mentionFeedItem = new MentionFeedItem(); mentionFeedItem.setId("@Bar"); mentionFeedItem.setText("@Barney"); mentionFeedItems.add(mentionFeedItem); mentionFeedItem = new MentionFeedItem(); mentionFeedItem.setId("@Marry"); mentionFeedItem.setText("@Marry Ann"); mentionFeedItems.add(mentionFeedItem); mentionFeedItem = new MentionFeedItem(); mentionFeedItem.setId("@Ted"); mentionFeedItem.setText("@Ted"); mentionFeedItems.add(mentionFeedItem); mentionFeed.setFeed(mentionFeedItems); mentionFeed.setMarker("@"); MentionConfig mentionConfig = new MentionConfig(); mentionConfig.setDropdownLimit(8); mentionFeeds.add(mentionFeed); mentionConfig.setFeeds(mentionFeeds); Config config = new Config(); config.setMention(mentionConfig);
... builder.readOnly = true; builder.hideToolbar=true; ... Button changeReadonlyMode = new Button("change readonly mode"); changeReadonlyMode.addClickListener((event -> { editor.setReadOnlyWithToolbarAction(!editor.isReadOnly()); }));
//By default, toolbar items be grouped when there is not enough space to display them in a single row, the code sample can be used to disable items grouping. ... config.setEditorToolBarObject(Constants.Toolbar.values(), true); ...
VaadinCKEditor editor = new VaadinCKEditorBuilder().with(builder -> { ... builder.ghsEnabled = true; .... }
VaadinCKEditor editor = new VaadinCKEditorBuilder().with(builder -> { ... builder.autosave = true; //When autosave is true, waiting time will be active builder.waitingTime = 5000; //You can customise the waiting time, default value 2000 (2s) ... }).createVaadinCKEditor();
//First clicking in the editor area, put the cursor wherever you want Button insertText = new Button("insert text"); insertText.addClickListener((event -> { editor.insertText(" Wow! Amazing~ "); }));
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
- fix image content floating on top of toolbar
- Released
- 2021-11-06
- Maturity
- IMPORTED
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 14+
- Vaadin 24.4+ in 4.1.2
- Vaadin 24.2+ in 4.0.0
- Vaadin 23+ in 3.2.1
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- Microsoft Edge
CKEditorVaadin - Vaadin Add-on Directory
CKEditor 5 and Vaadin, rich text editor including multiple functionalitiesView on GitHub
CKEditorVaadin version 2.0.0
* Configuration available.
* Move Toolbar, EditorType, etc to Config.
* HtmlEmbed feature integrated.
* Autosave Action introduced.
* Spell checker available.
* Upgrade CKEditor to v23.1.0
* Upgrade Vaadin to v14.4.2
CKEditorVaadin version 2.3.0
* Vaadin upgrade to v14.7.3
* ckeditor 5 upgrade to v31.0.0
* fix toolbar disappear on scrolling for classic editor
CKEditorVaadin version 2.3.1
* fix image content floating on top of toolbar
CKEditorVaadin version 2.3.2
* indent bug fix
* auto image integration
* text language selection
* upgrade Vaadin to v14.8.1
* upgrade ckeditor to v31.1.0
CKEditorVaadin version 2.3.3
* link bug fix
* restrict editing fix & update
* Vaadin upgrade to v14.8.4
CKEditorVaadin version 2.3.4
* mention bug fixes
* other config updates
CKEditorVaadin version 3.0.0
* Upgrade Vaadin to v23.1.7
* Upgrade CKEditor to v35.1.0
* Add OSGI support
CKEditorVaadin version 3.0.1
* Enhancement on readonly mode with toolbar hide/show
CKEditorVaadin version 3.1.1
* Upgrade Vaadin to v23.2.1
CKEditorVaadin version 3.1.2
* bug fix on lit
CKEditorVaadin version 3.1.3
* Fix for Vite
* Upgrade Vaadin to v23.2.6
CKEditorVaadin version 3.1.4
* Upgrade Vaadin to v23.2.8
* General Html Support implementation.
CKEditorVaadin version 3.1.5
* Upgrade vaadin to v23.2.9
CKEditorVaadin version 3.2.0
* Upgrade Vaadin to v23.3.1
* Upgrade ckeditor 5 to v35.4.0
CKEditorVaadin version 3.2.1
* Upgrade Vaadin to v23.3.5
* Bug fix - [header panel location while scrolling](https://github.com/wontlost-ltd/vaadin-litelement-ckeditor/issues/41)
* Enhancement - [add value change listener to source editing mode](https://github.com/wontlost-ltd/vaadin-litelement-ckeditor/issues/40)
CKEditorVaadin version 4.0.0
* Upgrade Vaadin to v24.2.3
* Upgrade ckeditor to v40.1.0
* Upgrade Java to 21
* Bug fixes and performance improvement
CKEditorVaadin version 4.1.2
* Upgrade Vaadin to v24.5.0
* Upgrade ckeditor 5 to v43.2.0
* Add 'line height'
* Add 'show blocks'
* Add capability of inserting text to the editor