Estoy usando el editor Froala WYSIWYG en mi proyecto. Me gustaría crear mi propio componente de selección de familia de fuentes que mostrará la familia de fuentes actual. Así que necesito escuchar los cambios de la selección de un editor, cada vez que obtengo la familia de fuentes actual y actualizo mi componente personalizado.
import "froala-editor/js/plugins/font_family.min.js"; import Froala from "froala-editor"; const editor = new Froala("#container", { events: { onSelectionChange: function() { // I need something like this. console.log(this.selection.get().fontFamily); // Eg. "Arial" or "Verdana". } } }); Solo encontré la opción fontFamilySelection en los documentos, sin embargo, mostrará la familia de fuentes actual en el componente de un editor nativo. Una forma es leer la familia de fuentes actual del componente nativo, pero no es una solución muy limpia.
¿Hay alguna manera de hacer algo como esto?
Pruebe estos tres ganchos de eventos adicionales
entrada - en la entrada del usuario
hacer clic : después de hacer clic en algún lugar del editor, tal vez en una etiqueta y fuente diferente
commands.after : después de cualquier comando de menú, como el selector de fuente nativo
Estos ganchos le permiten consultar el estilo de la familia de fuentes en la etiqueta actual.
const editor = new Froala("#container", { events: { onSelectionChange: function() { // I need something like this. console.log(this.selection.get().fontFamily); // Eg. "Arial" or "Verdana". }, 'input': function (inputEvent) { // after a user input console.log(this.selection.element().style.fontFamily); },'click': function (clickEvent) { // after a user click console.log(this.selection.element().style.fontFamily); }, 'commands.after': function (cmd, param1, param2) { // after a command, eg the user used the inbuilt font chooser console.log(this.selection.element().style.fontFamily); } } });Otros también pueden ser útiles, de la lista en https://froala.com/wysiwyg-editor/docs/events/