Ckeditor 侦听小部件的单击或双击

是否有可能监听小部件上的单击或双击事件？我已经学习了创建内联小部件插件的教程，现在我想听听下面演示的小部件上的点击或双击事件

如果要在编辑器中收听click事件，应使用ClickObserver。但是，它在默认情况下未启用，因此您应该添加它

用于侦听占位符元素上的单击的代码如下所示：

import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';

const view = editor.editing.view;
const viewDocument = view.document;

view.addObserver( ClickObserver );

editor.listenTo( viewDocument, 'click', ( evt, data ) => {
    const modelElement = editor.editing.mapper.toModelElement( data.target);

    if ( modelElement.name == 'placeholder' ) {
        console.log( 'Placeholder has been clicked.' );
    }
} );

默认情况下不启用双击，但可以创建自定义的单击观察者。您只需要通过本机domdblclick事件扩展通用DomEventObserver类

下面是代码：

import DomEventObserver from '@ckeditor/ckeditor5-engine/src/view/observer/domeventobserver';

class DoubleClickObserver extends DomEventObserver {
    constructor( view ) {
        super( view );

        this.domEventType = 'dblclick';
    }

    onDomEvent( domEvent ) {
        this.fire( domEvent.type, domEvent );
    }
}

然后在编辑器中使用它：

const view = editor.editing.view;
const viewDocument = view.document;

view.addObserver( DoubleClickObserver );
editor.listenTo( viewDocument, 'dblclick', () => {
    console.log( 'Double click fired.' );
} );

希望这对你有帮助