Modifying/Capturing key press with CKEditor5

Question

I'm trying to capture the input inside a CKEditor5 in an Angular app using typescript. I am able to get the CKEditor to show and am able to log the editor's presence. However, I can't seem to be able to capture the input. This seemed to be pretty straightforward in CKEditor4 where a simple code such as the one below worked:

editor.on('key', function (event) {
  //some work goes here
}

However, trying this with my current ClassicEditor doesn't seem to be the case. I am using Angular and have initialized the CKEditor5 in the index.html and call it from within the code in the following format

declare var ClassicEditor: any;

export class AlterInput implements OnInit {
  ngOnInit() {
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then(editor => {
            console.log("THIS GETS PRINTED", editor)
            editor.on('key', (event) => {
                                console.log('THIS DOES NOT GET PRINTED', event);
        })
        .catch( error => {
            console.error( error );
        } );
  }
}

I've originally created a plugin with CKEditor4 - which was done by calling CKEDITOR.plugins.add('pluginName', {\**some work in the init function**\})

However, I can't seem to find a decent example of how to do so using CKEditor5. My ultimate goal is to get the key code of the character entered, add one, and paste it.

Answer 1

In CKEditor 5 there are much more events you can listen to, but they are rarely placed in the Editor class itself. Also, the keydown event can be fired by multiple parts of the editor – the editing area itself and from the UI of the editor. You need to know what exactly you want to handle and plug your listener in the right place.

Listening to keys in the editing area

The one you're interested in is fired in the view Document (see the docs).

The below code will block A completely (so it doesn't insert anything into the editor) and just print out all the other keys:

ClassicEditor
  .create( document.querySelector( '#editor' ) )
  .then( editor => {
    editor.editing.view.document.on( 'keydown', ( evt, data ) => {
        console.log( data );

      if ( data.keyCode == 65 ) {
        console.log( 'AAAAAA!!' );

        data.preventDefault();
        evt.stop();
      }
    } );
  } )
  .catch( error => {
      console.error( error );
  } );

Check out the demo here: https://jsfiddle.net/093at0rp/3/

---

Registering keystroke handlers

The other option is to use the editor's keystroke handler.

ClassicEditor
  .create( document.querySelector( '#editor' ) )
  .then( editor => {
    editor.keystrokes.set( 'A', ( data, stop ) => {
        console.log( data );
        stop(); // Works like data.preventDefault() + evt.stop()
    } );
    editor.keystrokes.set( 'Ctrl+S', ( data, stop ) => {
        console.log( data );
    } ); 
  } )
  .catch( error => {
      console.error( error );
  } );

Check out the demo here: https://jsfiddle.net/093at0rp/7/

The nice thing about the keystroke handler is that you can quickly bind a command to a keystroke and that you can easily write keystrokes in a human readable way:

// Will execute the bold command when Ctrl+B is pressed.
editor.keystrokes.set( 'Ctrl+B', 'bold' ); 

---

The view.Document#keydown is fired when keys are pressed in the editing view. The same is true for the editor's keystroke handler – it only listens to the editing view.

However, keydown events can also be fired in the editor's UI (e.g. when you have the focus in the input of the link URL editing balloon). If you want to listen on these events, then you need to find the right DOM elements to plug your listeners.