---
title: Personalizing the editor toolbars and buttons
---

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

The [editor](https://docs.kentico.com/k10/managing-website-content/configuring-the-environment-for-content-editors/configuring-the-editor.md) toolbar is flexible and customizable. By default, the system uses different toolbar configurations for different types of content. This helps keep the interface clean. You can also modify the default toolbar sets or prepare your own custom sets.

> **Info:** **Standard toolbar sets**
>
> Kentico ships with several standard toolbar sets that are used by various applications:
>
> - **Full**
> - **Basic**
> - **Standard/Default**
> - **BizForm** - used for on-line forms.
> - **Forum** - used for the editor in forums (if enabled).
> - **Newsletter** - used for newsletter and email campaign content.
> - **Reporting** - used for report content.
> - **Invoice** - used for invoice content.
> - **Group** - used for groups.
> - **Widgets** - used for widgets.

## Defining toolbar sets

You can either modify existing toolbar sets or create your own custom toolbar sets.

To define toolbar sets, edit the **\CMS\CMSAdminControls\CKeditor\config.js** file.

The following code sample shows a definition of the full toolbar set containing all available buttons. You can create custom toolbar sets by using names of the default buttons, or by adding buttons of [custom CKEditor plugins](https://docs.kentico.com/k10/managing-website-content/configuring-the-environment-for-content-editors/configuring-the-editor/installing-ckeditor-plugins.md).

```csharp title="Default (Full) toolbar set definition"

config.toolbar_Full = [
    [sourceName, '-'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Scayt', '-'],
    ['Undo', 'Redo', 'Find', 'Replace', 'RemoveFormat', '-'],
    ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-'],
    ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv', '-'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-'],
    '/',
    ['InsertLink', 'Unlink', 'Anchor', '-'],
    ['InsertImageOrMedia', 'QuicklyInsertImage', 'Table', 'HorizontalRule', 'SpecialChar', '-'],
    ['InsertForms', 'InsertPolls', 'InsertRating', 'InsertYouTubeVideo', 'InsertWidget', '-'],
    ['Styles', 'Format', 'Font', 'FontSize'],
    ['TextColor', 'BGColor', '-'],
    ['InsertMacro', '-'],
    ['Maximize', 'ShowBlocks']
];

```

![](https://docs.kentico.com/docsassets/k10/personalizing-the-editor-toolbars-and-buttons/the_editor_toolbar.png)

Each toolbar set definition consists of several arrays representing toolbar groups. For example, the \['Styles', 'Format', 'Font', 'FontSize'] array represents a group of four buttons.

If you need to insert a line break between the button groups, use the _'/'_ string.

If you want to define your own toolbar set, add a command in the  _**config.toolbar\_ToolbarName**_  format to the **config.js** file.

> **Note:** **Important**: When you modify the _config.js_ file (or any other file used by the editor), the changes only apply after you _**clear your browser cache**_.

After defining a custom toolbar:

1. [Add the custom toolbar to available toolbar sets](#adding-custom-toolbars-to-available-toolbar-sets)
2. [Change the toolbar used on pages](#changing-the-toolbar-set-used-on-a-page)

## Adding custom toolbars to available toolbar sets

To make the toolbar that you defined available on the **Page** tab of the Pages application in Kentico, you need to add it as an option of the **Editable text** web part.

1. Open the **Web parts** application.
2. Edit the **Editable text** web part.
3. Switch to the **Properties** tab.
4. Select the **HTMLAreaToolbar** property.
5. Add the new toolbar set to the **Data source** setting. Enter the  _**ToolbarName**_ from the ****config.toolbar\_ToolbarName****  command you used in the toolbar definition.

   ![Adding custom toolbar to the Editable text web part](https://docs.kentico.com/docsassets/k10/personalizing-the-editor-toolbars-and-buttons/adding_toolbar_set_to_webpart.png "Adding custom toolbar to the Editable text web part")
6. **Save**.

The custom toolbar is now available for selection on pages.

## Changing the toolbar set used on a page

To assign a specific toolbar set for editable regions on individual pages:

1. Open the **Pages** application.
2. Select the page on which you want to change the toolbar set.
3. Switch to **Design** and **Configure** the web part for which you want to change the toolbar.

   ![Configuring a web part](https://docs.kentico.com/docsassets/k10/personalizing-the-editor-toolbars-and-buttons/configuring_webpart.png "Configuring a web part")
4. Under **Behavior**, change the **HTML editor toolbar set** property values to the name of the desired toolbar set.

   ![Changing toolbar set in the Editable text web part](https://docs.kentico.com/docsassets/k10/personalizing-the-editor-toolbars-and-buttons/changing_toolbar_set.png "Changing toolbar set in the Editable text web part")
5. Click **Save & Close**.

Users now see the appropriate toolbar set when editing the content of the page.

## Changing the editor toolbar location

By default, the **In-line** version of editor toolbar is used. In-line toolbar is attached to the text area that users are currently editing. In-line toolbar is visible only when users work with the text area, that is, they click into the area.

![In-line editor toolbar displays above or below a text area](https://docs.kentico.com/docsassets/k10/personalizing-the-editor-toolbars-and-buttons/inline_editor_toolbar.png "In-line editor toolbar displays above or below a text area")

You can also switch to the  **Shared**  version of the toolbar, which is then visible at the top of the page that users are editing. Shared toolbar is visible at the top of the page at all times.

![Shared editor toolbar displays at the top of the page](https://docs.kentico.com/docsassets/k10/personalizing-the-editor-toolbars-and-buttons/shared_editor_toolbar.png "Shared editor toolbar displays at the top of the page")

To switch from an in-line to a shared editor toolbar:

1. Open the **Pages** application.
2. Select the page on which you want to change the toolbar set.
3. Switch to **Design** and **Configure** the web part for which you want to change the toolbar.
4. Under **Behavior**, change **HTML editor toolbar location** to **Shared**.

   ![Switching to Shared toolbar](https://docs.kentico.com/docsassets/k10/personalizing-the-editor-toolbars-and-buttons/switching_to_shared_toolbar.png "Switching to Shared toolbar")
5. Click **Save & Close**.

Users now see the toolbar on the location of the shared toolbar.

## Configuring toolbars for page fields with the Rich text editor form control

To configure which toolbar is used to edit fields on **structured pages**(fields with the 'Rich text editor' form control edited via the **Form/Content** tab), configure the field's **Toolbar set** property:

1. Open the **Page types** application.
2. Edit the page type you wish to configure.
3. Switch to the **Fields** tab and select a field with the _Rich text editor_ form control.
4. Under **Editing control settings**, click **Advanced**.
5. Type the name of the toolbar set you wish to use when editing the field into **Toolbar set**.
6. (Optional) Specify a toolbar location in **Toolbar location**.
   - If not specified, the field is bound to a default toolbar at the top of the page.

## Configuring visibility of editor buttons

With Kentico, you can show or hide buttons from the integrated editor toolbar. Each button in the toolbar is represented by a UI element.

1. Open the  **UI personalization**  application.
2. On the **Editor** tab, select a **site** and a **role**.
3. Browse the UI element tree and select or clear the check boxes that represent the editor buttons.

The system automatically saves the settings as you select or clear check boxes in the UI element tree. The system hides the buttons (UI elements) that have their check box cleared for users in the selected role.

> **Info:** If a user is a member of multiple roles, they're allowed to see UI elements from all their roles combined.

### Using UI personalization for custom toolbar buttons

With Kentico, you can show or hide buttons from the integrated editor toolbar. Each button in the toolbar is represented by a UI element. The editor buttons are grouped into categories. Categories are represented by parent UI elements in the UI element tree.

If you want to display custom editor buttons based on UI personalization settings, you need to create matching UI elements:

1. Open the **Modules** application.
2. Edit the **WYSIWYG editor** module.
3. Switch to the **User interface** tab.
4. Navigate to the _CMS -> Administration -> Configuration -> UI personalization -> Editor -> WYSIWYG Editor_ section of the UI element tree.
5. Create the required elements under the _WYSIWYG Editor_ element (Click **New element** ).
   - The elements must be assigned to a custom module (you can use the default _Custom_ module if you do not have a different custom module).
   - UI elements representing buttons  _**must have the same Code name**_  as the button name used in the toolbar definitions within the _config.js_ file. This is  _**case sensitive**_.

The system then uses the following process to display editor buttons:

1. Action buttons are loaded into each toolbar based on the toolbar definition.
2. If UI personalization is enabled, action buttons are filtered according to UI personalization settings of the user's roles.

### Toolbar personalization on the live site

Toolbar personalization is disabled by default on the live site. If you wish to apply UI personalization to editor toolbars on the live site, add the following key to the **/configuration/appSettings** section of your project's web.config file:

```html

<add key="CKEditor:PersonalizeToolbarOnLiveSite" value="true" />

```

Once this is done, all UI personalization settings apply to editors on the live site.