CKEditor y crear Eventos de Teclado Personalizados
Te voy a mostrar cómo puedes establecer eventos de teclado en tu secadito fíjate que yo quiero colocar esto que fuera como un código es decir esta opción que tenemos acá tuviera que venir aquí y darle un click y ahí lo tenemos el problema es que cuando estamos estableciendo mucho texto entonces estar haciendo esto a cada rato puede ser un problema sobre todo esta implementación yo la hice fue para cuando estaba copiando el contenido de mis libros a lo que es mi aplicación de Academia y justamente tengo aquí un CKEditor.
Fíjate que estoy seleccionando este texto pero en vez de darle por aquí voy a darle un evento de voy a darle a una tecla en mi teclado vale la redundancia en este caso f2 y puedes ver que aquí funciona y por aquí aparece la tecla que acabo de presionar entonces cómo hice esto la implementación.
Implementación
Fíjate que cuando creamos la distancia 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 sea lo que sea que queramos hacer con él en este caso era establecerlo aquí en la pantalla por si quiero hacer algo desde la vista que esté creando el CKEditor obtener el por ejemplo el html pero aquí también estoy estableciendo un evento de teclado es decir un evento normalito aquí en
javascript Windows event listener el evento que 1ueremos escuchar en este caso el de keydown pero puede ser cualquier otro y por aquí lo que 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 de JS pero también tenemos acceso a una función llamado click() que lo que hace es por cualquiera que sea la razón simular un evento clit en tu aplicación digo por cualquiera que sea la razón porque creo que es una función no muy empleada ya que usualmente el evento click() está asociado a una función por lo tanto es más fácil llamar a la función que hacerlo mediante un evento click pero para este tipo de casos en la cual estamos trabajando con un plugin de terceros si no puedes venir de perla entonces lo que estamos haciendo en resumen es en base al contenido seleccionado simplemente que desencadene el funcionamiento normal que tenemos en CKEditor sobre el elemento cado tal cual puedes ver y eso es todo así 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 con los ids como puedes ver pero yo creo que
es cuestión de buscar aquí alguno que sea es decir recuerda aquí lo puedes manejar de muchas formas puedes por ejemplo obtener este elemento creo que aquí pudiera ser mejor este elemento es decir hacer una un query más complejo para que te devuelva solamente uno podemos colocar aquí punto voy a quitar esto a ver cuánto me devuelve esto voy a colocar aquí al aquí no devolvió nada porque demonios no devolvió nada si está en el dropdown se supone que el otro es un hijo aquí tenemos el botón aquí tenemos esto que es lo que acaba de seleccionar:
ck-splitbutton__actionY el selector queda como:
document.querySelector(".ck-splitbutton__action").click()- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter