如何在CKEditor中侦听小部件选择？

Question

我正在通过CKEDITOR.instances [editorId] .insertHtml()(在角应用程序内)添加自定义小部件,我需要对小部件选择做出反应,可能会取消选择.

我看到该窗口小部件会触发诸如select,deselect,focus和blur等事件,但我无法找到如何在每个窗口小部件上设置监听器.

这可以在插件的init函数内完成吗？

谢谢

Answer 1

你可以直接或间接地听这个.

直接侦听器需要使用该widget.repository#instanceCreated事件才能widget#blur在所有创建的小部件上侦听事件:

editor.widgets.on( 'instanceCreated', function( evt ) {
    var widget = evt.data;

    // You can check at this point whether you want to observe this kind of widget
    // e.g. check widget.name.

    widget.on( 'blur', function() {
        // Fired when widget is deselected.
    } );
} );

间接方法将使用editor#selectionChange事件来观察选择更改和widget.repository.focused属性以检查现在选择(或不)的窗口小部件:

var lastFocused = null;

editor.on( 'selectionChange', function() {
    if ( lastFocused && lastFocused !== editor.widgets.focused ) {
        // The lastFocused widget just lost focus.
    } 

    lastFocused = editor.widgets.focused;
} );

对于大多数情况,两种方法都可以.如果你期望大量的小部件,首先可能会消耗更多的内存:D.

BTW.窗口小部件既可以聚焦又可以选择.不同之处在于可以同时选择多个小部件,而只有一个小部件可以被聚焦(然后它具有蓝色轮廓).在大多数情况下,您会对焦点小部件感兴趣.