Customizing the Rich text editor toolbar

To provide better experience for content editors, you can customize the toolbar of the Rich text inline editor to display 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 configuration of the default 'Kentico.Widget.RichText'
    // and sets to toolbar to be visible at all times
    configurations["default"] = {
        toolbarVisibleWithoutSelection: true,
        toolbarInline: 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,
        toolbarVisibleWithoutSelection: true,
        toolbarInline: false
    };
})(window.kentico.pageBuilder);

Include the script into the layout of your pages (e.g. ~/Views/Shared/_Layout.cshtml):

@using Kentico.PageBuilder.Web.Mvc

@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:

@using Kentico.PageBuilder.Web.Mvc

Html.Kentico().RichTextEditor(propertyName, "simple");

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