I have a
simple test app
that displays a button and a CKEditor widget. For some reason on IE8 only (maybe other IE versions too?), when I first load the app, if I click the “Hit server” button (dummy button not tied into anything, just a way to force an ‘immediate’ client.updateComponent()) or click the “Save” button in CKEditor, the CKEditor widget disappears.
But if you load the application, hit the browser refresh, then it works in IE8 fine, like it needs a double load for whatever reason to be sticky. But it appears to be correct on the first load (nothing is missing), and clicking the button even submits the CKEditor buffer back to the server side, it just disappears.
This does not happen on FF 3.5, Chrome 4, Safari 4 or Opera 10.
What might I be doing wrong with respect to IE8? I am using a recent Vaadin 6.3 nightly.
The entire test app is:
public class VaadinCKEditorApplication extends Application {
@Override
public void init() {
Window mainWindow = new Window("Vaadin CkEditor Application", new CssLayout());
setMainWindow(mainWindow);
mainWindow.addComponent(new Button("Hit server"));
CKEditorTextField ckEditorTextField = new CKEditorTextField();
// The following defines the toolbar to be a custom toolbar, and defines the custom toolbar.
ckEditorTextField.setInPageConfig(
"{ " +
"extraPlugins: 'vaadinsave'," + // add this if using the editor's VaadinSave button
"toolbar : 'Custom'," +
"toolbar_Custom : [" +
"['Styles','Format','Bold','Italic','TextColor','BGColor','-','Font','FontSize','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Image','Link']
," +
"'/'," +
"['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','-','NumberedList','BulletedList','-','Outdent','Indent','-','Table','HorizontalRule','-','Maximize','-','Source','ShowBlocks','-','VaadinSave']
" +
"]" +
" }"
);
ckEditorTextField.useCompactTags();
mainWindow.addComponent(ckEditorTextField);
ckEditorTextField.setValue("<p>Thanks TinyMCEEditor for getting us started on the CKEditor integration.</p><h1>Like TinyMCEEditor said, "Vaadin rocks!"</h1><h1>And CKEditor is no slouch either.</h1>");
ckEditorTextField.addListener(new Property.ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
getMainWindow().showNotification("Content now: " + event.getProperty().toString().replaceAll("<", "<"));
}
});
}
}
And the server side widget extends TextField, but it’s paint method is pretty simple:
public void paintContent(PaintTarget target) throws PaintException {
super.paintContent(target);
if (inPageConfig != null) {
target.addAttribute("inPageConfig", inPageConfig);
}
if ( writerRules != null ) {
int i = 0;
Set<String> tagNameSet = writerRules.keySet();
for( String tagName : tagNameSet ) {
target.addAttribute("writerRules.tagName"+i, tagName);
target.addAttribute("writerRules.jsRule"+i, writerRules.get(tagName));
++i;
}
}
}
The client side of the widget code is also pretty straightforward:
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
this.client = client;
paintableId = uidl.getId();
// This call should be made first.
// It handles sizes, captions, tooltips, etc. automatically.
// If client.updateComponent returns true there have been no changes
// and we do not need to update anything.
if ( client.updateComponent(this, uidl, true) ) {
return;
}
immediate = uidl.getBooleanAttribute("immediate");
// Save reference to server connection object to be able to send
// user interaction later
// Save the client side identifier (paintable id) for the widget
getElement().setId(paintableId);
dataBeforeEdit = uidl.getStringVariable("text");
if ( ckEditor == null ) {
getElement().setInnerHTML(dataBeforeEdit);
String inPageConfig = uidl.hasAttribute("inPageConfig") ? uidl.getStringAttribute("inPageConfig") : null;
// See if we have any writer rules
int i = 0;
while( true ) {
if ( ! uidl.hasAttribute("writerRules.tagName"+i) ) {
break;
}
// Save the rules until our instance is ready
String tagName = uidl.getStringAttribute("writerRules.tagName"+i);
String jsRule = uidl.getStringAttribute("writerRules.jsRule"+i);
if ( writerRules == null ) {
writerRules = new HashMap<String,String>();
}
writerRules.put(tagName, jsRule);
++i;
}
ckEditor = (CKEditor)CKEditorService.loadEditor(paintableId, this, inPageConfig);
} else {
CKEditorService.get(paintableId).setData(dataBeforeEdit);
}
}
// Listener callback
@Override
public void onSave() {
if ( client != null && paintableId != null && ckEditor != null ) {
// Called if the user clicks the Save button.
String data = ckEditor.getData();
if ( ! data.equals(dataBeforeEdit) ) {
client.updateVariable(paintableId, "text", data, true);
dataBeforeEdit = data;
}
}
}