從 Froala 編輯器獲取當前選擇信息

Question

我在我的項目中使用Froala所見即所得編輯器。 我想創建自己的字體系列 select 組件，它將顯示當前的字體系列。 所以我需要傾聽編輯選擇的變化，每次獲取當前字體系列並更新我的自定義組件。

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". 
        }
    }
});

我只在文檔中找到fontFamilySelection選項，但是，它會在本機編輯器的組件中顯示當前字體系列。 一種方法是從本機組件讀取當前字體系列，但這不是一個非常干凈的解決方案。

有沒有辦法做這樣的事情？

Answer 1

試試這三個額外的事件掛鈎

input - 用戶輸入

單擊- 在編輯器中單擊某處后，可能進入不同的標簽和字體

commands.after - 在任何菜單命令之后，比如原生字體選擇器

這些掛鈎允許您查詢當前標簽上的字體系列樣式。

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

其他人也可能有用，來自 https 的列表：//froala.com/wysiwyg-editor/docs/events/