Customizing the Rich text editor toolbar

If you want to add features to the Rich text inline editor, you can create custom plugins. All plugins available by Froala are already included in the inline editor.

Implementing plugins

Within your MVC project, create a JavaScript file for your plugins. It is recommended to store this file in the ~/Scripts folder of your project. Within the file, implement the plugin according to the Froala documentation.

(function (pageBuilder) {
    var richTextEditor = pageBuilder.richTextEditor = pageBuilder.richTextEditor || {};

    // Retrieves the collection of plugins
    var plugins = richTextEditor.plugins = richTextEditor.plugins || [];
    // Creates a plugin
    var myFirstPlugin = function (FroalaEditor) {
            ...
        };
    // Adds the plugin to the collection
    plugins.push(myFirstPlugin);
})(window.kentico.pageBuilder);

Include the scripts containing the plugins into the layout of your pages (e.g. ~/Views/Shared/_Layout.cshtml). The scripts with plugins need to be registered after page builder scripts.

@using Kentico.PageBuilder.Web.Mvc

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

@* Register plugin scripts *@
@if (Context.Kentico().PageBuilder().EditMode)
{
    @Scripts.Render("~/Scripts/SamplePlugins.js")
}

Example - Create a custom toolbar button

The following example shows you how to create a simple plugin that allows you to replace 'you' in the text with 'Thou'.

Create a new JavaScript file: ~/Scripts/sampleButtonPlugin.js

(function (pageBuilder) {
    var richTextEditor = pageBuilder.richTextEditor = pageBuilder.richTextEditor || {};

    // Retrieves the collection of plugins
    var plugins = richTextEditor.plugins = richTextEditor.plugins || [];
    // Creates a new Sample Button
    var sampleButtonPlugin = function (FroalaEditor) {
            FroalaEditor.DefineIcon("sampleButtonIcon", { NAME: "star", SVG_KEY: "help" });
            FroalaEditor.RegisterCommand("sampleButton", {
                title: "Sample Button",
                icon: "sampleButtonIcon",
                callback: function () {
                      var htmlContent = this.html.get();
                      htmlContent=htmlContent.replace(/you/gi, 'Thou');
                      this.html.set(htmlContent);
                }
            });
        };
    // Adds the plugin to the collection
    plugins.push(myButtonPlugin);

    // Retrieves the collection of toolbar configurations
    var configurations = richTextEditor.configurations = richTextEditor.configurations || {};
    // Overrides the default toolbar configuration to display the plugin button
    configurations["default"] = {
        toolbarButtons: ['paragraphFormat', '|', 'sampleButton', 'bold', 'italic', 'underline', '|', 'align', 'formatOL', 'formatUL']
    };
})(window.kentico.pageBuilder);

Register the JavaScript file in the ~/Views/Shared/_Layout.cshtml file:

@if (Context.Kentico().PageBuilder().EditMode)
{
    @Scripts.Render("~/Scripts/sampleButtonPlugin.js")
}

The plugin is now available under the '?' button in the toolbar of the Rich text editor.