Kentico 13 - How to apply styles for the Froala editor

Question

How can I apply styles to the Froala editor in Kentico 13 (v13.0.124)?

I tried setting useClasses to false and confirmed new config was being used but no joy there.

There's a setting in Kentico (CSS stylesheet for WYSIWYG editor) but that only applies to the CkEditor it seems.

Thanks,

Rory

Answer 1

I've created a RichTextEditorConfiguration.js like this:

(function (pageBuilder) {
    var richTextEditor = pageBuilder.richTextEditor = pageBuilder.richTextEditor || {};
    var configurations = richTextEditor.configurations = richTextEditor.configurations || {};
    // Overrides the "default" configuration of the Rich text widget, assuming you have not specified a different configuration
    // The below configuration adds the h5 and h6 values to the paragraphFormat and removes the code value.  Also sets the toolbar to be visible without selecting any text.
    configurations["default"] = {
        toolbarVisibleWithoutSelection: true,
        toolbarButtons: ['bold', 'italic', 'underline', 'inlineClass', 'clearFormatting', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', '|', 'insertLink', '|', 'html'],
        paragraphFormat: {
            N: "Normal",
            H1: "Headline 1",
            H2: "Headline 2",
            H3: "Headline 3",
            H4: "Headline 4",
            H5: "Headline 5",
            H6: "Headline 6",
            SMALL: "Small",
            BIG: "Big"
        },
        htmlRemoveTags: ['style'],
        htmlExecuteScripts: false,
        inlineClasses: {
            'text-primary': 'Color Primary',
            'badge bg-primary': 'Badge Primary'
        }
    };

    // Defines a new configuration for a simple toolbar with only formatting
    // options and disables the inline design of the toolbar
    configurations["simple"] = {
        toolbarButtons: ['paragraphFormat', '|', 'bold', 'italic', 'underline', '|', 'align', 'formatOL', 'formatUL'],
        paragraphFormatSelection: true,
        toolbarInline: false
    };
})(window.kentico.pageBuilder);