CKEditor and creating Custom Keyboard Events

I'm going to show you how to set up keyboard events in your CKEditor. Notice that I want to implement this as if it were code; that is, this option we have here would have to come here, be clicked, and there you have it.

The problem is that when we're working with a lot of text, having to do this all the time can become inconvenient. I implemented this precisely when I was copying the content of my books to my Academia application, and that's where I have a CKEditor.

Using a key to execute the action

Notice that I'm selecting this text, but instead of clicking here, I'm going to execute an event using a key on my keyboard—redundancy intended. In this case, I press F2, and you can see that it works: the key I just pressed appears here.

Implementation

Notice that when we create the CKEditor instance -which is what you're seeing here on the screen- that's a promise function that executes. In other words, at this point the editor has been built, and we can do whatever we want with it.

In this case, it was to set it up here on the screen in case I want to do something from the view that CKEditor is creating, like getting the HTML, for example.

Setting a keyboard event

But here I'm also setting up a keyboard event; that is, a standard JavaScript event, using window.addEventListener. The event we want to listen for, in this case, is keydown, although it could be any other.

And here you can see the event:

ClassicEditor.create(document.querySelector('#editor'), editorConfig)
    .then(editor => {
        window.editor = editor;
        window.addEventListener(
            "keydown",
            (event) => {
                if (event.code == "Numpad1" || event.code == "F2") {
                    event.preventDefault()
                    // if (event.ctrlKey) {
                    // en el ckeditor al marcar un texto coloca el bloque de codigo
                    document.querySelector(".ck-splitbutton__action").click()
                }
            },
            true,
        );
    });

The key, click() function

You might not know much about JavaScript, but we also have access to a function called click(), which—for whatever reason—simulates a click event in your application. I say "for whatever reason" because I think it's not a very commonly used function, since the click event is usually directly associated with a function. Therefore, it's often easier to call the function than to trigger it with a click event.

But for these kinds of cases, where we're working with a third-party plugin, it can be incredibly useful. So, in short, what we're doing is simply triggering the normal behavior of CKEditor on the selected element based on the content, as you can see.

And that's it. So, if you want to implement something similar to mine, now you know how.

Getting a reference to the button whose click you're going to simulate

The biggest challenge here is working with the IDs, as you can see. But I think it's just a matter of finding one that works. Remember that you can handle this in many ways: for example, getting a more specific element with a more complex query to ensure it only returns one.

You can put a selector here; for example, I'm going to remove this and see how many elements it returns. I'm going to put... It didn't return anything here. Why on earth didn't it return anything if it's in the dropdown? The other one is supposed to be a child. Here we have the button, and here we have this, which is what you just selected.

ck-splitbutton__action

And the selector looks like this:

document.querySelector(".ck-splitbutton__action").click()