Установите семейство шрифтов по умолчанию и размер шрифта в текстовом редакторе sap ui5

Question

Мне удалось заставить работать редактор richtext в sap ui5 по следующему коду:

    sap.ui.require(["sap/ui/richtexteditor/RichTextEditor", "sap/ui/richtexteditor/EditorType"],
                    function (RTE, EditorType) {
                var oRichTextEditor = new RTE("myRTE", {
                    editorType: EditorType.TinyMCE4,
                    width: "100%",
                    height: "200px",
                    customToolbar: true,
                    showGroupFont: true,
                    showGroupLink: true,
                    showGroupInsert: true,
                    value: sHtmlValue,
                    ready: function () {
                        this.addButtonGroup("styleselect").addButtonGroup("table");
                    }
                });

                that.getView().byId("textarea").addContent(oRichTextEditor);
            });

Теперь клиент хочет иметь семейство шрифтов по умолчанию и размер шрифта Arial и Размер 11 быть по умолчанию.

Можете ли вы помочь мне, как я могу установить эти значения по умолчанию?

Answer 1

Из коробки RTE не поддерживает 11 пт. Вы должны расширить доступный список допустимых размеров шрифта.

Затем в событии beforeEditorInit вы можете применить свои настройки

sap.ui.require([
    "sap/ui/richtexteditor/RichTextEditor",
    "sap/ui/richtexteditor/EditorType",
    "sap/ui/richtexteditor/library"
], (RTE, EditorType, RTELibrary) => {
    // RTE only supports a few FontSizes out of the box. Add your additional FontSize here
    const aFontSizes = RTELibrary.EditorCommands.FontSize;
    aFontSizes.push(11);
    aFontSizes.sort((a, b) => a - b);

    const oRichTextEditor = new RTE("myRTE", {
        editorType: EditorType.TinyMCE4,
        customToolbar: true,
        showGroupFont: true,
        beforeEditorInit: function (oEvent) {
            const oConfig = oEvent.getParameter("configuration");
            const fnSuperSetup = oConfig.setup;
            oConfig.setup = (oEditor) => {
                // if you want you can call the original setup method here
                fnSuperSetup(oEditor);
                oEditor.on("init", function () {
                    oEditor.execCommand("FontName", false, "arial, helvetica, sans-serif");
                    oEditor.execCommand("FontSize", false, "11pt");
                });
            };
        }
    });

    this.getView().byId("mainPage").addContent(oRichTextEditor);
});

Небольшой недостаток: раскрывающийся список не выбирает правильный значение (11 баллов). Но вы можете видеть в исходном коде, что это действительно 11 пт:

Возможно, у кого-то еще есть идея, почему выпадающий список не обновляется правильно при вызове execCommand (работает только для элементов меньше, чем вставленный).