keydown Component events

[J0ekr]

Hey,
im trying to build a CKEditor application with Vue, where I want to save every single keystroke to a csv file.
Therefore I want to use the keydown event, but I can't get it to work.
Or are the only component events in vue the ones listed here?
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#component-events
In my template I currently have:

<ckeditor :editor="editor" :value="editorData" :config="editorConfig" @ready="onEditorReady"
                      @input="onEditorInput" @keydown="onKeyDown"></ckeditor>

[Mgsy]

Hello, unfortunately you can use only component events which are presented in our documentation. However, you can listen to keydown event directly from the editing area and capture all keys.

To do that, let's prepare a simple plugin:

function CaptureKeys( editor ) {
    editor.editing.document.view.on( 'keydown', ( evt, data ) => {
        console.log( data );
        console.log( 'Pressed key: ' + data.domEvent.key );

        // Do something on keydown...
    }
} 

And include it to the editor config:

// ...
editorConfig: {
    plugins: [
            EssentialsPlugin,
            BoldPlugin,
            ItalicPlugin,
            LinkPlugin,
            ParagraphPlugin,
	    Font,
	    CaptureKeys
     ],
// ...

Now, just open the editor and all keys will be logged to the console:

[J0ekr]

Thank you this works.

I created a new javascript file CaptureKeys.js

export function CaptureKeys( editor ) {
    editor.editing.view.document.on( 'keydown', ( evt, data ) => {
        console.log( 'Pressed key: ' + data.domEvent.key );
        // Do something on keydown...
    })
}

and then importing import {CaptureKeys} from '../../CaptureKeys.js in my vue editor file.

I first got TypeError: Cannot read property 'getAttribute' of null
But could fix it by copying the vue.config.js from #55 (comment)