Directory

← Back

CKEditorVaadin

CKEditor 5 and Vaadin, rich text editor including multiple functionalities

Author

Rating

Popularity

1400+

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
-------------------------- -------------------------- --------------------------

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 registeration
  • Configuration

Next enhancements

  • Selection Event
  • 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;
    ....
}

Compatibility

(Loading compatibility data...)

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

  • Upgrade Vaadin to v24.2.3
  • Upgrade ckeditor to v40.1.0
  • Upgrade Java to 21
  • Bug fixes and performance improvement
Released
2024-01-20
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 24.2+
Vaadin 14+ in 2.0.0
Vaadin 23+ in 3.0.0
Browser
Firefox
Opera
Safari
Google Chrome
Microsoft Edge

CKEditorVaadin - Vaadin Add-on Directory

CKEditor 5 and Vaadin, rich text editor including multiple functionalities CKEditorVaadin - Vaadin Add-on Directory
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 | | -------------------------- | -------------------------- | -------------------------- | Note: [export to pdf](https://ckeditor.com/docs/ckeditor5/latest/features/export-pdf.html) and [export to word](https://ckeditor.com/docs/ckeditor5/latest/features/export-word.html) are CKEditor Premium Features. You need to pay to use after 30 days free trial. Features * i18n * Dark mode * Autosave action * Custom action registeration * Configuration Next enhancements * Selection Event * bug fixes Future enhancements * theme on Lumo & Material Please feel free to post issues regarding to the addon on [github](https://github.com/eroself/vaadin-litelement-ckeditor/issues). **Note: Remember to whitelist 'com.wontlost' in your application.properties** ``` vaadin.whitelisted-packages = com.wontlost ``` Your [donation](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=Q6H3YAQCWHMM4&source=url) will make the addon much better, thanks for all your support.
Online