CKEditorVaadin

CKEditor 5 and Vaadin, rich text editor including multiple functionalities

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

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.

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;
    ....
}

Links

• Online Demo
• View on GitHub

Compatibility