Listen on ckeditor widget events

Question

I have tried to extend the simple box widget tutorial (http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1) with some events but I don't really get it. One of my goals is to trigger an event if an editable (eg. the simplebox-title) field within the widget get focused. But unfortunately I'm only able to listen if the widget itself get focused:

editor.widgets.add('simplebox', {
            // definitions for
            // button, template, etc
            init: function() {
                this.on('focus', function(ev){
                    console.log('focused this');
                });
            }
        });

or if the data is changed:

CKEDITOR.plugins.add('simplebox', {
// my plugin code
init: function (editor) {    
    editor.widgets.on( 'instanceCreated', function( evt ) {
        var widget = evt.data;
        widget.on('data', function(evt){
            console.log("data changed");
        });
    });
}
//even more code
});

How do I listen to editable fields within widgets? Another challenge for me is to fire an event if the widget is removed. Maybe someone also know how to listen to this event too?

Answer 1

How do I listen to editable fields within widgets?

There are no events for editable fields within widgets. They behave like the main editable, so when you change something in them the editor#change event is fired.

Another challenge for me is to fire an event if the widget is removed.

There's the widget#destroy event, but you will not find it very useful. The reason is that widgets are not always destroyed as you delete them because there are many ways to do so.

If you pressed backspace while having a widget selected, then yes - this event is fired, because deletion is made directly on the widget. However, it is fired after the widget was deleted.

If you select the entire content of editor and press backspace, then the browser deletes it, because the browser handles this key in this case. Therefore, CKEditor implements a small garbage collector which checks from time to time which widget instances were removed and destroys them. You can increase the frequency by calling editor.widgets.checkWidgtes() more often - e.g. on editor#change, but it won't change anything. In both cases the event is fired after the widget is deleted.