Customizing the Rich text editor toolbar

To provide a better experience for content editors, you can customize the toolbar of the Rich text inline editor to display a specific set of buttons and format options. You can configure the inline editor to display different toolbar for each widget.

1. Define toolbar configurations

Within your MVC project, create a JavaScript file for toolbar configurations. It is recommended to store this file in the ~/Scripts folder of your project. In this file, define the toolbar options for each configuration as seen in the code example below. Some plugins were adjusted for the Xperience environment (e.g. insertImage and insertLink) but these plugins override respective Froala plugins and you do not need to use different code names to include them in your projects.

✔️ In addition to the listed options, you can use the insertDynamicText option in your configurations to include personalized text.

(function (pageBuilder) {
    var richTextEditor = pageBuilder.richTextEditor = pageBuilder.richTextEditor || {};
    var configurations = richTextEditor.configurations = richTextEditor.configurations || {};
    // Overrides the "default" configuration of the widget, assuming you haven't 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,
        paragraphFormat: {
            N: "Normal",
            H1: "Headline 1",
            H2: "Headline 2",
            H3: "Headline 3",
            H4: "Headline 4",
            H5: "Headline 5",
            H6: "Headline 6",
        },
    };

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

Include the script containing the configurations into the layout of your pages (e.g. ~/Views/Shared/_Layout.cshtml). The toolbar configuration script needs to be registered after page builder scripts.

@using Kentico.PageBuilder.Web.Mvc

...

@* Register page builder scripts *@
@Html.Kentico().PageBuilderScripts()

@* Register the toolbar configuration script *@
@if(Context.Kentico().PageBuilder().EditMode)
{
    @Scripts.Render("~/Scripts/MyComponentsConfiguration.js")
}

2. Use defined configurations in widgets

When rendering the Rich text inline editor in a view of a widget, specify a configuration name as a parameter of the RichTextEditor method. If you do not specify any configuration, a default configuration (named default) is used.

@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Components.Web.Mvc.InlineEditors

@Html.Kentico().RichTextEditor(editablePropertyName, "simple");

Now, whenever you add widgets containing the Rich text inline editor to a page through the page builder, you will see a customized toolbar for each widget.