Question

是否可以监听小部件上的click或doubleclick事件？我已经按照创建内嵌窗口小部件插件的教程进行操作，现在我想从以下演示中监听窗口小部件上的click或doubleclick事件。 https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html#demo

Answer 1

如果要在编辑器中监听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.' );
    }
} );

默认情况下，不启用

双击，但是您可以创建自定义点击观察器。您只需要通过本机DOM dblclick事件扩展通用的 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.' );
} );

希望这对您有帮助！

监听小部件的单击或双击

1 个答案: