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 the 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.

(function (pageBuilder) {
    var richTextEditor = pageBuilder.richTextEditor = pageBuilder.richTextEditor || {};
    var configurations = richTextEditor.configurations = richTextEditor.configurations || {};
    // Overrides the default configuration of widgets (i.e. when no configuration is specified)
    configurations["default"] = {
        toolbarVisibleWithoutSelection: true,
    };

    // 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.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.