CKEditor and creating Custom Keyboard Events

CKEditor and creating Custom Keyboard Events

I'm going to show you how you can set keyboard events in your secadito. Note that I want to place this as a code, that is to say, this option that we have here had to come here and click on it and there we have it. The problem is that when we are setting a lot of text, then doing this all the time can be a problem. Especially this implementation. I did it for when I was copying the content of my books to what is my Academy application and I have a CKEditor here.

Note that I am selecting this text but instead of clicking here, I am going to give it an event of I am going to press a key on my keyboard. Exactly, in this case, F2. You can see that it works here and the key that I just pressed appears here. So how did I do this? The implementation.

Implementation

Note that when we create the CKEditor distance which is what you are seeing here on the screen that is a promise function that is executed, that is to say at this point the editor has already been built and we can do whatever we want to do with it in this case it was to set it here on the screen in case I want to do something from the view that is creating the CKEditor to get for example the html but here I am also setting a keyboard event that is to say a normal event here in
javascript Windows event listener the event that we want to listen to in this case the keydown event but it can be any other and here is what 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 may not know about JS but we also have access to a function called click() that what it does is for whatever reason simulate a click event in your application. I say for whatever reason because I think it is a function that is not used very much since usually the click() event is associated with a function therefore it is easier to call the function than to do it through a click event but for this type of cases in which we are working with a third-party plugin if you can't come by pearl then what we are doing in summary is based on the selected content simply trigger the normal operation that we have in CKEditor on the each element as you can see and that's all so in case you want to do an implementation similar to mine you already know how to do it.

Get a reference to the button you are going to simulate the click on

The greatest complexity that you can have here is precisely with the ids as you can see but I think that
it is a matter of looking for one here that is, remember here you can handle it in many ways, for example, you can get this element, I think that here this element could be better, that is, make a more complex query so that it returns only one, we can put point here I am going to remove this to see how much this returns me, I am going to put here al here it did not return anything because the hell it did not return anything if it is in the dropdown it is supposed that the other is a child here we have the button here we have this which is what was just selected:

ck-splitbutton__action

And the selector looks like this:

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

- Andrés Cruz

En español

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.