CKEditor destroys the widget on drag and drop

Question

I'm using the CKEditor's widget functionality to create my own widget with a jquery component there. However when the widget is dragged and dropped it gets destroyed and all the state in the jquery component gets lost. Can this behavior be avoided? Is it configurable? Why it is required (maybe the CKEditor team can answer this)?

Answer 1

It is true that the widget is destroyed (and re-initialized) during drag and drop, this behavior can't be avoided.

How do you link your jQuery component with the widget object? What does your widget definition look like? (It is the object that you pass in the editor.widgets.add() call). Do you use Widget.setData() / How do you set this jQuery component as widget data?

If it's hard for you to answer these questions, you might just copy paste here the source code of your widget instance (open the browser's developer tools and look for an element with the data-cke-widget-id attribute - do not confuse with source mode view in CKEditor). Paste it with the whole content.

Widgets store their data in the data-cke-widget-data HTML attribute. A blind guess would be that you either do not set the data correctly on the widget or when it is stringified and then parsed back, it doesn't handle the jQuery object properly. Maybe you could initialize your jQuery component using widget.definition.init and keep the data as a plain object (Widget.setData)?

You might also want to look to CKEditor widget documentation for more information.