Hi, I'm having some problems and some wishes....(Vaadin 14.2.0 Java 11) 1)

Directory CKEditorVaadin
1

Hi, I’m having some problems and some wishes…(Vaadin 14.2.0 Java 11)

  1. Using a binder with existing data: The editor doesn’t show the text but the binder and editor.getValue() both have the data. I’m getting an JS-Error “(TypeError) this.editorMap[editorId]
    is undefined”. But the id is defined via builder and via setId?
    ckNotiz = new VaadinCKEditorBuilder().with(builder → {
    builder.editorId = “KBckEditor”;
    builder.editorType = EditorType.CLASSIC;
    builder.uiLanguage = Language.de;
    builder.theme = ThemeType.LIGHT;
    }).createVaadinCKEditor();
    ckNotiz.setId(“KBckEditor”);
    What’s wrong there?
  2. The german Language File is loaded from https://www.wontlost.com/translations/de.js. I had to open my content security policy settings. If the file can’t be loaded, the editor won’t be displayed (no fallback to english). How is it possible to use a local translation-file?
  3. The class VaadinCKEditor has no public constructor, so it is not possible to extend the class. In my case, I’ve tried to add an html-sanitizer for security in the setValue-method.
2

Martin Eyrich:
both have th

Hi, having same issue (1.) with Vaadin 14.3.0 and 14.3.3. Data is not loaded, but saving is ok. Did not try with id set, but there is no such requirements in examples.

3

There is no difference, if the id is set or not. JavaScript error remains the same, data is not loaded.

4

There is a default id if not set explicitly.
Can I have a look at your code snippet?

5

My code:

VaadinCKEditorBuilder ckNotizBuilder = new VaadinCKEditorBuilder().with(builder -> {
					builder.editorId = "ckNotiz";
					builder.editorType = EditorType.CLASSIC;
				    builder.uiLanguage = Language.de;
				    builder.theme = ThemeType.LIGHT;
				    builder.margin = "0px";
				    builder.placeHolder = "Bitte geben Sie hier Ihren Text ein.";
				    builder.toolbar = builder.toolbar=new Toolbar[]{
				    		Toolbar.heading,
				    		Toolbar.removeFormat
				    			};				    
				});
				
				ckNotiz = ckNotizBuilder.createVaadinCKEditor();
				ckNotiz.setId("ckNotiz");
				ckNotiz.setLabel("Notiz:");
				ckNotiz.setWidth("680px");
				ckNotiz.setHeight("420px");
				ckNotiz.setRequiredIndicatorVisible(true);
				ckNotiz.setEnabled(true);
				ckNotiz.setVisible(true);

				binderTicket
				  .forField(ckNotiz)
				  .bind(Ticket::getNotiz,Ticket::setNotiz);				
				
				ckNotiz.addValueChangeListener(event -> {
					ckNotiz.setErrorMessage(null);
					logger.info("Bean " + binderTicket.getBean().getNotiz());
					logger.info("getValue " + ckNotiz.getValue());
				});
				```
6
  1. Add builder.editorData='Content in your binder bean' to initialize the editor content.
  2. I will do an enhancement on this issue in the next release.
7

Yes, it works. But then I would have to change the entire data logic …
Ok i will wait for the next release…

8

Also you could use editor.doSetUpdate('updated data') if editor data changed.

9

New version released. I hope the binding issue had been fixed. And the i18n enhancement also has been applied to the latest version.

10

Perfect, translation is included and initial data is set. Thx
Hopefully i can add my html sanitizer.

11

Maybe you could use binder validation to achieve html sanitizer.

12

Good idea,

binderTicket
				  .forField(ckNotiz)
				  .withConverter(
						  new Converter<String,String> () {

							@Override
							public Result<String> convertToModel(String value, ValueContext context) {
								return Result.ok(new SecureCKEditorHelper().sanitize(value));
							}

							@Override
							public String convertToPresentation(String value, ValueContext context) {
								return new SecureCKEditorHelper().sanitize(value);
							}
						  })
				  .bind(Ticket::getNotiz,Ticket::setNotiz);

The visual representation stays the same, but the binder value is sanitized.