I am using Froala WYSIWYG editor in my project. I would like to create my own font-family select component which will display the current font-family. So I need to listen to changes of an editor's selection, each time get current font-family and update my custom component.
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".
}
}
});
I only found fontFamilySelection option in the docs, however, it will show the current font family in a native editor's component. One way is to read the current font family from the native component, but it's not a very clean solution.
Is there any way to do something like this?
Try these three additional event hooks
input - on user input
click - after clicking somewhere in the editor, perhaps into a different tag and font
commands.after - after any menu command, like the native font picker
These hooks allow you to query the font-family style on the current tag.
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, e.g. the user used the inbuilt font chooser
console.log(this.selection.element().style.fontFamily);
}
}
});
Others might be useful too, from the list at https://froala.com/wysiwyg-editor/docs/events/