Get current selection info from Froala editor

Question

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?

Answer 1

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/