---
title: Implementing rich text editor plugins
related:
  - https://docs.kentico.com/13/managing-website-content/editing-rich-text-content/using-the-rich-text-widget.md
  - https://docs.kentico.com/13/configuring-xperience/configuring-the-environment-for-content-editors/configuring-the-rich-text-editor-for-page-builder.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

If your editors are missing a feature in the [rich text editor for the page builder](https://docs.kentico.com/13/configuring-xperience/configuring-the-environment-for-content-editors/configuring-the-rich-text-editor-for-page-builder.md), you can extend the editor via plugins.

You can develop your own custom plugins or add existing Froala plugins. Many of the default Froala plugins are already included in the rich text editor. See the [Froala documentation](https://froala.com/wysiwyg-editor/docs/plugins/) to find a list of all available plugins and instructions on how to add them. Froala plugins are covered by your Kentico Xperience license, so you do not need to purchase them separately.

> **Info:** Certain plugins were adjusted for the Xperience environment and are not identical to the corresponding default Froala plugins even though they share the same name, e.g., _Image_ or _Link_.

## Implementing plugins

Within your live site project, create a JavaScript file for your plugins.  It is recommended to store this file in the project's _\~/wwwroot/Scripts_ or _\~/Scripts_ folder.

Within the file, implement and add plugins according to the [Froala documentation](https://froala.com/wysiwyg-editor/docs/concepts/custom/plugin).

```js

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

```

To make the plugins available for your entire site, include the scripts containing the plugins into the website's main layout (e.g. _\~/Views/Shared/\_Layout.cshtml_). The scripts with plugins must be registered after page builder scripts.

<!-- dev-model:core start -->

**ASP.NET Core development model.** Applies only when building with ASP.NET Core. If this page also covers MVC 5, that version is in its own block.

```csharp

@using Kentico.PageBuilder.Web.Mvc

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

@* Registers plugin scripts *@
@if (Context.Kentico().PageBuilder().EditMode)
{     
    <script src="~/Scripts/sampleButtonPlugin.js"></script>
}

```

<!-- dev-model:core end -->

<!-- dev-model:mvc start -->

**MVC 5 development model.** Applies only when building with ASP.NET MVC 5. If this page also covers ASP.NET Core, that version is in its own block.

```csharp

@using Kentico.PageBuilder.Web.Mvc

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

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

```

<!-- dev-model:mvc end -->

After you create a new plugin, you need to add the given plugin to a [toolbar configuration](https://docs.kentico.com/13/configuring-xperience/configuring-the-environment-for-content-editors/configuring-the-rich-text-editor-for-page-builder/customizing-the-rich-text-editor-toolbar.md) to make it available in the rich text editor.

## Example – Creating a custom toolbar button

The following example shows you how to create a simple plugin that allows you to replace occurrences of the word 'you' with 'Thou'.

Create a new JavaScript file: _\~/Scripts/sampleButtonPlugin.js_

```js title="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", { 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(sampleButtonPlugin);

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

```

\~/Views/Shared/\_Layout.cshtml\* file:

<!-- dev-model:core start -->

**ASP.NET Core development model.** Applies only when building with ASP.NET Core. If this page also covers MVC 5, that version is in its own block.

```csharp title="_Layout.cshtml"

@if (Context.Kentico().PageBuilder().EditMode)
{
    <script src="~/Scripts/sampleButtonPlugin.js"></script>
}

```

<!-- dev-model:core end -->

<!-- dev-model:mvc start -->

**MVC 5 development model.** Applies only when building with ASP.NET MVC 5. If this page also covers ASP.NET Core, that version is in its own block.

```csharp title="_Layout.cshtml"

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

```

<!-- dev-model:mvc end -->

The functionality is now available under the '?' button in the toolbar of the default **Rich text** widget.