收听ckeditor小部件事件

Question

我试图用一些事件扩展简单的盒子小部件教程(http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1),但我真的没有得到它.我的目标之一是在窗口小部件中的可编辑(例如,简单框标题)字段得到关注时触发事件.但不幸的是,我只能听取小部件本身的重点:

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

如何在小部件中收听可编辑字段？

窗口小部件中没有可编辑字段的事件.它们的行为类似于主要的可编辑,因此当您更改其中的某些内容时,editor#change事件就会被触发.

对我来说,另一个挑战是在移除小部件时触发事件.

这是widget#destroy事件,但你不会发现它非常有用.原因是当您删除窗口小部件时,窗口小部件并不总是被销毁,因为有很多方法可以执行此操作.

如果您backspace在选择窗口小部件时按下,则是 - 此事件被触发,因为直接在窗口小部件上进行删除.但是,在删除窗口小部件后会触发它.

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