CKEditor wrapper for Vaadin

CKEditor wrapper for use in Vaadin applications

View larger

Close

CKEditor is a javascript-based HTML "rich text" editor that works in common browsers. This component provides a wrapper around it for use in a Vaadin-based application.

Vaadin 6: Developed using Vaadin 6.8.10 and CKEditor 4.1.1 in an Eclipse environment. This is no longer supported here.

Vaadin 7: Developed using Vaadin 7.7.16 and CKEditor 4.11.3 in an Eclipse environment. This is currently being support.

Vaadin 8: Currently no plans are in the works. Note there is another project that claims to have done so: https://vaadin.com/directory#!addon/ckeditor

Vaadin 10: Unsure about this as it's unclear when we'll rework our huge Vaadin 7 app that makes use of the editor.

You simply can drop the JAR file into your Vaadin WEB-INF/lib and begin using it, but as for all new add-ons, do a Vaadin widgetset compile.

Note this was compiled with JDK 1.6.

Sample code

public class VaadinCKEditorUI extends UI {

	@Override
	public void init(VaadinRequest request) {
		
		getPage().setTitle("Vaadin7 CKEditor UI");
		
		VerticalLayout mainView = new VerticalLayout();
		setContent(mainView);
		
		final String editorInitialValue = 
				"<p>Thanks TinyMCEEditor for getting us started on the CKEditor integration.</p>\n\n<h1>Like TinyMCEEditor said, &quot;Vaadin rocks!&quot;</h1>\n\n<h1>And CKEditor is no slouch either.</h1>\n";

		CKEditorConfig config = new CKEditorConfig();
		config.useCompactTags();
		config.disableElementsPath();
		config.setResizeDir(CKEditorConfig.RESIZE_DIR.HORIZONTAL);
		config.disableSpellChecker();
		config.setWidth("100%");
		
		final CKEditorTextField ckEditorTextField = new CKEditorTextField(config);
		mainView.addComponent(ckEditorTextField);
		
		ckEditorTextField.setValue(editorInitialValue);
		ckEditorTextField.addValueChangeListener(new Property.ValueChangeListener() {
			public void valueChange(ValueChangeEvent event) {
				Notification.show("CKEditor v" + ckEditorTextField.getVersion() + " - contents: " + event.getProperty().getValue().toString());
			}
		});	
		
	    Button button = new Button("Hit server");
	    mainView.addComponents(button);
	}
}

Links

• Source Code
• Author Homepage
• Online Demo

Compatibility