CKEditor y crear Eventos de Teclado Personalizados

▶

Te voy a mostrar cómo puedes establecer eventos de teclado en tu CKEditor. Fíjate que yo quiero colocar esto como si fuera un código; es decir, esta opción que tenemos acá tendría que venir aquí, darle clic, y ahí lo tenemos.

El problema es que, cuando estamos trabajando con mucho texto, estar haciendo esto a cada rato puede convertirse en un inconveniente. Esta implementación yo la hice precisamente cuando estaba copiando el contenido de mis libros a mi aplicación de Academia, y es ahí donde tengo un CKEditor.

Uso de una tecla para ejecutar la acción

Fíjate que estoy seleccionando este texto, pero en vez de darle clic por aquí, voy a ejecutar un evento usando una tecla de mi teclado—valga la redundancia. En este caso, presiono F2, y puedes ver que funciona: por aquí aparece la tecla que acabo de presionar.

Implementación

Fíjate que, cuando creamos la instancia de CKEditor -que es lo que estás viendo aquí en pantalla-, eso es una función de promesa que se ejecuta. Es decir, en este punto ya se ha construido el editor y podemos hacer lo que sea que queramos hacer con él.

En este caso, era establecerlo aquí en la pantalla por si quiero realizar algo desde la vista que está creando el CKEditor, como obtener, por ejemplo, el HTML.

Establecer un evento de teclado

Pero aquí también estoy configurando un evento de teclado; es decir, un evento normalito en JavaScript, usando window.addEventListener. El evento que queremos escuchar, en este caso, es keydown, aunque podría ser cualquier otro.

Y por aquí puedes ver el evento:

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

La clave, función click()

Puede que no conozcas mucho de JavaScript, pero también tenemos acceso a una función llamada click(), que lo que hace es —por la razón que sea— simular un evento click en tu aplicación. Digo “por la razón que sea” porque creo que es una función no muy empleada, ya que usualmente el evento click está asociado directamente a una función, por lo tanto suele ser más fácil llamar a la función que dispararla mediante un evento de tipo click.

Pero para este tipo de casos, en los cuales estamos trabajando con un plugin de terceros, sí que nos puede venir de perlas. Entonces, lo que estamos haciendo, en resumen, es que, en base al contenido seleccionado, simplemente se desencadene el funcionamiento normal que tenemos en CKEditor sobre el elemento dado, tal cual puedes ver.

Y eso es todo. Así que, en caso de que quieras hacer una implementación similar a la mía, ya sabes cómo hacerlo.

Obtener una referencia al botón al cual vas a simular el click

La mayor complejidad que puedes tener aquí es, precisamente, trabajar con los IDs, como puedes ver. Pero yo creo que es solo cuestión de buscar alguno que funcione. Recuerda que esto lo puedes manejar de muchas formas: por ejemplo, obtener un elemento más específico con un query más complejo para asegurarte de que solo devuelve uno.

Puedes colocar aquí un selector; por ejemplo, voy a quitar esto a ver cuántos elementos me devuelve. Voy a colocar a… Aquí no devolvió nada. ¿Por qué demonios no devolvió nada si está en el dropdown? Se supone que el otro es un hijo. Aquí tenemos el botón, y aquí tenemos esto, que es lo que acabas de seleccionar.

ck-splitbutton__action

Y el  selector queda como:

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