侦听小部件的单击或双击

Question

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

Answer 1

如果你想在编辑器中监听点击事件，你应该使用 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.' );
} );

希望对您有所帮助！