Directory

← Back

CKEditorVaadin

CKEditor 5 and Vaadin, rich text editor including multiple functionalities

Author

Rating

Popularity

1900+

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~ ");
}));

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

  • bug fix on lit
Released
2022-10-17
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 23+
Vaadin 24.4+ in 4.1.2
Vaadin 24.2+ in 4.0.0
Vaadin 14+ in 2.3.4
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
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 | | line height | show block|| | -------------------------- | -------------------------- | -------------------------- | 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 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](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://github.com/sponsors/wontlost-ltd) will make the addon much better, thanks for all your support.
Online Demo
View 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

Online