Ckeditor5: Is there a way to listen for click or doubleclick of the widget?

[stefanoww]

Is there a possibility to listen click or doubleclick event on the widget? I have followed the tutorial of creating the inline widget plugin and now I would like to listen for the click or doubleclick event on the widget from the following demo. https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html#demo

[Mgsy]

Hi, if you want to listen to click event in the editor, you should use ClickObserver. However, it's not enabled by default, so you should add it.

The code for listening on click on the placeholder element will look like this:

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.' );
    }
} );

[Nik720]

I am facing a similar kind of issue that I want to listen to on a double click event. Using the above snippet where @Mgsy answered is working for a single click but not for double click.

Is there any way in ckeditor5 plugin to listen for the double click event?

[FilipTokarski]

Is there any way in ckeditor5 plugin to listen for the double click event?

Hi! Listening to double click is not enabled by default, but you can create a custom click observer. You just need to extend a generic DomEventObserver class by a native DOM dblclick event.

Here's the code for that:

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 );
    }
}

And then use it in the editor:

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

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

If instead of just console.log you need to do something else or listen to double click on some specific element, please refer to the above comment by @Mgsy .

Hope it helps!

[Nik720]

The above solution is working as expected as I want.

Thanks @FilipTokarski

[accorinti]

Is there a way to know when and what toolbox button has been clicked?
(Please also tell where to put the inport declaration using ckeditor as CDN script)
Thanks

[FilipTokarski]

You can use callback function arguments to retrieve event targets:

editor.listenTo( viewDocument, 'dblclick', ( event, data ) => {
    console.log( event );
    console.log( data );     // data.domEvent to get the native event 
} );

[accorinti]

I get the error "viewDocument' is not defined.

Here my code:`

    DecoupledDocumentEditor.create( document.querySelector( '#editor' ), {
         placeholder: 'Schreib hier deinen Text...',
         toolbar:['undo', 'redo', '|', 'fontFamily', 'fontSize','fontColor', 'fontBackgroundColor', '|',
                 'bold', 'italic', 'underline', 'strikethrough', 'removeFormat', '|', 'alignment', 'selectAll', '|',
                'link', '|', 'insertTable', '|', 'numberedList', 'bulletedList' ]
    })
    .then( editor => {
        const toolbarContainer = document.querySelector( '#toolbar-container' );
        toolbarContainer.appendChild( editor.ui.view.toolbar.element );

        editor.listenTo( viewDocument, 'dblclick', ( event, data ) => {
            console.log( event );
            console.log( data );     // data.domEvent to get the native event 
        } );

    })
    .catch( error => {
        console.error( error );
    });

`
I need to know when a BUTTON in the TOOLBOX has been clicked. Thanks for helping :-)