CKEditor Upgrade Issues

Vaadin 6 / 7 / 8 Framework UI
1

I’ve upgraded to CKEditor Wrapper for Vaadin 1.8 and now my custom toolbar is having issues.

At first, it simply wouldn’t show the toolbar.

Then, I revised the custom toolbar code to:
config.addCustomToolbarLine(“{ name: ‘styles’, items : [‘Bold’,‘VaadinSave’,‘Strike’,‘Underline’,‘-’,‘Undo’,‘Redo’,‘PasteFromWord’,‘-’,‘NumberedList’,‘BulletedList’,‘-’,‘Outdent’,‘Indent’]
}”);

This resulted in the toolbar being shown, but several icons were missing, e.g. Paste from Word.

Any ideas what is missing?

Thanks.
-Rich

2

Not sure since the configuration of CKEditor can be tricky. Don’t know if this syntax will work any better, but it more closely matches how we’d set that up (removing the name: ‘styles’):

config.addCustomToolbarLine(“{ items : [‘Bold’,‘VaadinSave’,‘Strike’,‘Underline’,‘-’,‘Undo’,‘Redo’,‘PasteFromWord’,‘-’,‘NumberedList’,‘BulletedList’,‘-’,‘Outdent’,‘Indent’]
}”);

Also, if you are using the VaadinSave button, you need to enable that: config.enableVaadinSavePlugin();

When we upgraded from CKEditor 3.x to the 4.x branch, we saw something similar in that it was showing the wrong icons, and that appeared to be fixed after clearing the browser caches.

3

Okay, I used your setting in the test application shipped with this add-on and it worked just fine. Attached the screenshot.

The code as modified was done on the second editor instance and was just:


CKEditorTextField ckEditorTextField2 = new CKEditorTextField();		
CKEditorConfig config2 = new CKEditorConfig();
config2.addCustomToolbarLine("{ name: 'styles', items : ['Bold','VaadinSave','Strike','Underline','-','Undo','Redo','PasteFromWord','-','NumberedList','BulletedList','-','Outdent','Indent']
 }");
config2.enableVaadinSavePlugin();
ckEditorTextField2.setConfig(config2);
ckEditorTextField2.setValue(editor2InitialValue);

I’m guessing that clearing the caches in your browser will resolve it, though I’m not sure why there’s such a conflict.
12905.png