CKEditor with autogrow

Hi there,

has anyone used CKEditor wrapper with the autogrow plugin? I managed to add the plugin but now the problem is that the Vaadin layouting engine doesn’t notice when the size has changed.

Any experience or idea with this?

Thanks!
Andrea
22227.jpg

No info on this particular ckeditor plugin, but you need to ensure the plugin is part of the build (it’s not part of the default “full ckeditor” download we provide, so you need to rebuild it with your plugin added), and then enable with with the CKEditorConfig.addToExtraPlugins(String pluginName) method.

Yes, that’s exactly how I managed to add the plugin! The problem is that somehow the Vaadin LayoutManager needs to be informed about the resize event because the editor resizes nicely but the parent components don’t adapt. Do you know what I mean?

Well, if you use 100% width/height on the editor itself, it will expand to fill the area of its contained Vaadin component, but we’ve never used autogrow.

Ok I’ve found the solution, feel free to use it too:

In CKEditor > instanceReady(CKEditorService.CKEditorListener listener) I added the following line to get noticed when CKEditor performs an autogrow:

this.on( 'resize', function( ev ) { ev.listenerData.@org.vaadin.openesignforms.ckeditor.widgetset.client.ui.CKEditorService.CKEditorListener::onResize()(); }, null, listener); In CKEditorListener, add

public void onResize(); In VCKEditorTextField, add

@Override public void onResize() { GWT.log("onResize in VCKEditorTextField"); if (clientResizeListener != null) { clientResizeListener.onWidgetResize(); } } In CKEditorConnector, add this to tell Vaadin layout manager to re-measure the widget:

[code]
private final ResizeOnClientSideListener resizeListener = new ResizeOnClientSideListener() {
public void onWidgetResize() {
getLayoutManager().setNeedsMeasureRecursively(CKEditorConnector.this);
}
};

@Override
protected void init() {
super.init();
getWidget().addClientResizeListener(resizeListener);
}
[/code]Now my autogrow works like a charm.

Have fun,
Andrea

Thanks for the detailed fix for this. Not sure what clientResizeListener is in VCKEditorTextField, but we’ll see about adding the resize support based on your changes to the next version that would otherwise just include the newest CKEditor version.

Can you perhaps share your actual code? You see to be missing stuff in the posting above that will allow us to put this into the add-on for everyone.

ResizeOnClientSideListener ?

clientResizeListener ?

It would be best, too, if there were an obvious way to request that these events be sent between the client and server like the other events for FOCUS and BLUR, etc.

Did you do any other hooks for this, or just called CKEditorConfig.addToExtraPlugins(“autogrow”)?

Hi David,

I made some more changes too, I can send you an email with my whole adapted version if you wish. The shared code in the above post is indeed missing the definition of the inst var for the listener (I thought I’d just give you the important bits in favour of readability). The other changes were an effort in trying to use an on change event but I failed. On change is fired way too often and all I actually needed was a way to activate my dirty flag. It would be amazing if ckeditor had a onDirty event :slight_smile:

The hooks for “focus”, “blur” etc. are actually already there and all in one place, I just had to add “resize” to the list and add the listener. Maybe you could add a generic way to add listeners for all kinds of events.

I added autogrow the way you said plus:

config.addToExtraPlugins("autogrow");
config.addExtraConfig("autoGrow_onStartup", "true");
config.addExtraConfig("autoGrow_bottomSpace", "0");
config.addExtraConfig("autoGrow_minHeight", "1");
config.addExtraConfig("autoGrow_maxHeight", "0");
config.setResizeEnabled(false);

Well, if you’d like your autogrow changes to be part of the add-on, we’d be happy to include your changes so you and the community can make use of it in subsequent releases. We just need the changes you made to the add-on’s code, and we can include your snippet above to show others how it’s been enabled.

Note that while we do give “credit” to the author of the code changes to the add-on, the changes themselves will become part of our copyrighted code base that is released under the Apache 2 license and you effectively give up your rights to own your changes. Alternatively, you can create a fork of the add-on project and control that yourself, or you can just keep it to yourself. We do appreciate contributions to help the project, though, and hope you choose that route.

If possible, please attach your code here in the forum as they are publicly accessible and help to document this transfer of your code changes to the add-on.