javascript - 监听 ckeditor 小部件事件

Question

我已尝试扩展简单的框小部件教程( http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1 ) 有一些事件，但我真的不明白。我的目标之一是在小部件中的可编辑(例如 simplebox-title)字段获得焦点时触发事件。但不幸的是，我只能在小部件本身获得焦点时才能收听:

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

或者如果数据改变了:

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
});

如何收听小部件中的可编辑字段？对我来说，另一个挑战是在删除小部件时触发事件。也许有人也知道怎么听这个事件？

Answer 1

How do I listen to editable fields within widgets?

小部件内的可编辑字段没有事件。它们的行为类似于主要的可编辑对象，因此当您更改其中的某些内容时，将触发 editor#change 事件。

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

有 widget#destroy事件，但您不会发现它非常有用。原因是小部件并不总是在您删除它们时被销毁，因为有很多方法可以这样做。

如果您在选择一个小部件时按下了 backspace，那么是的 - 这个事件被触发，因为删除是直接在小部件上进行的。但是，它会在小部件被删除后触发。

如果你选择编辑器的全部内容并按下退格键，那么浏览器会删除它，因为在这种情况下浏览器会处理这个键。因此，CKEditor 实现了一个小型垃圾收集器，它会不时检查哪些小部件实例被删除并销毁它们。您可以通过更频繁地调用 editor.widgets.checkWidgtes() 来增加频率 - 例如在 editor#change 上，但它不会改变任何东西。在这两种情况下，都会在删除小部件后触发事件。