---
title: Configuring the rich text editor for page builder
related:
- https://docs.kentico.com/13/managing-website-content/editing-rich-text-content/using-the-rich-text-widget.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).
The rich text editor available for the [page builder](https://docs.kentico.com/13/developing-websites/page-builder-development.md) allows content editors to add formatted text to pages using standard word processor features. The rich text editor can be customized by [personalizing the toolbar](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) or [implementing custom plugins](https://docs.kentico.com/13/configuring-xperience/configuring-the-environment-for-content-editors/configuring-the-rich-text-editor-for-page-builder/implementing-rich-text-editor-plugins.md).
The system uses an implementation of the [Froala WYSIWYG](https://froala.com/wysiwyg-editor/) editor.
> **Info:** **Froala versions**
>
> Xperience uses the following [Froala editor versions](https://froala.com/wysiwyg-editor/changelog/):
>
> | Xperience version | Froala version |
> | ------------------ | -------------- |
> | 13.0.190 and newer | 4.6.0 |
> | 13.0.181 and newer | 4.5.0 |
> | 13.0.133 and newer | 4.1.4 |
> | 13.0.104–13.0.132 | 4.0.17 |
> | 13.0.82–13.0.103 | 4.0.14 |
> | 13.0.58–13.0.81 | 4.0.8 |
> | 13.0.10–13.0.57 | 3.2.6 |
> | 13.0.0–13.0.9 | 3.2.2 |
## HTML allowed in the editor
To improve the security of the system, the editor sanitizes all user input and discards any HTML tags, attributes and URIs that are not allowed.
### Configuring tags and attributes allowed in the editor
Developers can customize the set of allowed tags and attributes by adding the following keys to the configuration file of the live site application:
- **CMSHtmlSanitizerAllowedTags** – Specifies a set of HTML tags that can be used in the editor. Setting this key replaces the default set of allowed tags.
**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="appsettings.json - default value"
"CMSHtmlSanitizerAllowedTags": [
"a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "queue", "rp", "rt", "ruby", "s", "samp", "section", "select", "small", "source", "span", "strike", "strong", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr"
]
```
**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.
```xml title="Web.config - default value"
```
- **CMSHtmlSanitizerAllowedAttributes** – Specifies a set of HTML attributes that can be used in the editor. Setting this key replaces the default set of allowed attributes.
**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="appsettings.json - default value"
"CMSHtmlSanitizerAllowedAttributes": [
"accept", "accept-charset", "accesskey", "action", "align", "allowfullscreen", "allowtransparency", "alt", "aria-.*", "async", "autocomplete", "autofocus", "autoplay", "autosave", "background", "bgcolor", "border", "charset", "cellpadding", "cellspacing", "checked", "cite", "class", "color", "cols", "colspan", "content", "contenteditable", "contextmenu", "controls", "coords", "data", "data-.*", "datetime", "default", "defer", "dir", "dirname", "disabled", "download", "draggable", "dropzone", "enctype", "for", "form", "formaction", "frameborder", "headers", "height", "hidden", "high", "href", "hreflang", "http-equiv", "icon", "id", "ismap", "itemprop", "keytype", "kind", "label", "lang", "language", "list", "loop", "low", "max", "maxlength", "media", "method", "min", "mozallowfullscreen", "multiple", "muted", "name", "novalidate", "open", "optimum", "pattern", "ping", "placeholder", "playsinline", "poster", "preload", "pubdate", "radiogroup", "readonly", "rel", "required", "reversed", "rows", "rowspan", "sandbox", "scope", "scoped", "scrolling", "seamless", "selected", "shape", "size", "sizes", "span", "src", "srcdoc", "srclang", "srcset", "start", "step", "summary", "spellcheck", "style", "tabindex", "target", "title", "type", "translate", "usemap", "value", "valign", "webkitallowfullscreen", "width", "wrap"
]
```
**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.
```xml title="Web.config - default value"
```
### URIs allowed in the editor
> **Note:** **Hotfix required**
>
> The features described in this section require [hotfix 13.0.163](https://devnet.kentico.com/download/hotfixes) or newer.
By default, only the following URI values are allowed in the editor:
> **Info:** URI values are only allowed if they start with the following schemes:
>
> "http", "https", "mailto", "tel", "data"
>
> Only the following MIME types are allowed for URIs with the _data_ scheme:
>
> "image/avif", "image/bmp", "image/gif", "image/jpeg", "image/png", "image/webp"
## Enabling users to add rich text content in the page builder
There are several ways to include the editor in the page builder interface:
### Widget
The **Rich text** widget is one of the [default widgets](https://docs.kentico.com/13/developing-websites/page-builder-development/reference-system-widgets.md) available in the system. This widget can be [extended](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-widgets/extending-widgets.md) to include custom functionality.
### Editing component
The rich text [editing component](https://docs.kentico.com/13/developing-websites/form-builder-development/assigning-editing-components-to-properties.md) allows users to input rich text content in:
- the configuration dialogs or panels of [page builder](https://docs.kentico.com/13/developing-websites/page-builder-development.md) components (for example widgets)
- the properties panel or configuration dialogs of [form builder](https://docs.kentico.com/13/developing-websites/form-builder-development.md) components ([form components](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components/defining-form-component-properties.md) or [sections with properties](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-custom-form-layouts/defining-form-section-properties.md))
To assign the rich text editor to a property of a component, edit the component's property class (properties model), and annotate the property with an **EditingComponent** attribute. When rendering the output of the rich text editor property for the live site, use the **Html.Kentico().ResolveRichText** extension method to correctly resolve links within the rich text content.
```csharp title="Example - Properties model of a component"
using Kentico.Forms.Web.Mvc;
using Kentico.Components.Web.Mvc.FormComponents;
// Assigns the 'RichTextComponent' as the editing component of the 'RichTextProperty' property
[EditingComponent(RichTextComponent.IDENTIFIER)]
public string RichTextProperty { get; set; }
```
```csharp title="Example - View of a component"
@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Web.Mvc
// A view model with the rich text content
@model CustomWidgetViewModel
...
// Displays the HTML content
@Html.Raw(Html.Kentico().ResolveRichText(Model.RichTextContent))
```
### Inline editor
The rich text [inline editor](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-widgets/creating-inline-editors-for-widget-properties.md) allows users to input rich text content directly into widgets in the page builder interface. To include the rich text inline editor in a widget, edit the view of the widget and call the **Html.Kentico().RichTextEditor(propertyName)** extension method. Pass the name of the edited property (use the _nameof()_ operator) as the method's parameter. When rendering the output of the rich text editor for the live site, use the **Html.Kentico().ResolveRichText** extension method to correctly resolve links within the rich text content.
```csharp title="Example - View of a widget"
@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Web.Mvc
// A model that contains the properties of a custom rich text editing widget
@model ComponentViewModel
...
// Evaluates if the view is displayed in the edit mode of the page builder
@if (Context.Kentico().PageBuilder().EditMode)
{
// Displays the inline editor
Html.Kentico().RichTextEditor(nameof(Model.Properties.RichTextContent));
}
else
{
// Displays the HTML content of the property
@Html.Raw(Html.Kentico().ResolveRichText(Model.Properties.RichTextContent))
}
```
> **Tip:** **Customizing the rich text inline editor toolbar**
>
> To [customize the toolbar](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) of the rich text inline editor, use the optional second parameter of the **Html.Kentico().RichTextEditor(propertyName, configurationName)** method. If no configuration is specified, the _default_ configuration is used.
>
> ```csharp
>
> // Displays the inline editor with a specified toolbar configuration
> Html.Kentico().RichTextEditor(nameof(Model.Properties.RichTextContent), "simpleToolbar");
>
> ```