---
title: Rich text editor setup
related:
  - https://docs.kentico.com/documentation/developers-and-admins/configuration/rich-text-editor-configuration/rich-text-editor-plugins.md
  - https://docs.kentico.com/documentation/developers-and-admins/configuration/rich-text-editor-configuration/rich-text-editor-customization.md
  - https://docs.kentico.com/documentation/business-users/rich-text-editor.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](https://docs.kentico.com/documentation/business-users/rich-text-editor.md) available in the admin UI allows users to input content using conventional word processor features. The editor is based on the [Froala](https://froala.com/wysiwyg-editor/) WYSIWYG editor.

The editor provides various customization options:

- [Create custom editor configurations](https://docs.kentico.com/documentation/developers-and-admins/configuration/rich-text-editor-configuration/rich-text-editor-customization.md#create-and-use-custom-editor-configurations), for example to adjust the set of available formatting options
- [Add custom plugins](https://docs.kentico.com/documentation/developers-and-admins/configuration/rich-text-editor-configuration/rich-text-editor-plugins.md) that extend the editor's available feature set
- [Customize how the system loads editor configurations](https://docs.kentico.com/documentation/developers-and-admins/configuration/rich-text-editor-configuration/rich-text-editor-customization.md#override-and-extend-editor-configurations-dynamically)

## Use the rich text editor

The editor can be assigned to:

- [fields via the field editor](#field-editor)
- [component properties as an editing component](#editing-component)

### Field editor

You can assign the [rich text editor form component](https://docs.kentico.com/documentation/developers-and-admins/customization/extend-the-administration-interface/ui-form-components/reference-admin-ui-form-components.md) to [fields](https://docs.kentico.com/documentation/developers-and-admins/customization/field-editor.md) of the **Rich text (HTML)** type. To use [editors with custom configurations](https://docs.kentico.com/documentation/developers-and-admins/configuration/rich-text-editor-configuration/rich-text-editor-customization.md#create-and-use-custom-editor-configurations), select the configuration in the component's **Configuration name** property.

### Editing component

The rich text [editing component](https://docs.kentico.com/documentation/developers-and-admins/customization/extend-the-administration-interface/ui-form-components/editing-components.md) allows users to input rich text content in:

- the configuration dialogs or panels of [Page Builder](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder.md) and [Email Builder](https://docs.kentico.com/documentation/developers-and-admins/development/builders/email-builder.md) components (for example widgets)
- the configuration dialogs of [Form Builder](https://docs.kentico.com/documentation/developers-and-admins/development/builders/form-builder.md) components ([form components](https://docs.kentico.com/documentation/developers-and-admins/development/builders/form-builder/form-components.md) or [sections with properties](https://docs.kentico.com/documentation/developers-and-admins/development/builders/form-builder/form-sections.md))
- configuration dialogs of other admin UI components ([form components](https://docs.kentico.com/documentation/developers-and-admins/customization/extend-the-administration-interface/ui-form-components.md), [visibility](https://docs.kentico.com/documentation/developers-and-admins/customization/extend-the-administration-interface/ui-form-components/ui-form-component-visibility-conditions.md) and [validation](https://docs.kentico.com/documentation/developers-and-admins/customization/extend-the-administration-interface/ui-form-components/ui-form-component-validation-rules.md) rules)
- custom [admin UI pages](https://docs.kentico.com/documentation/developers-and-admins/customization/extend-the-administration-interface/ui-pages/ui-pages-with-forms.md)

To use the editor as an editing component, annotate required properties with the `RichTextEditorComponent` attribute. Assign [custom configurations](https://docs.kentico.com/documentation/developers-and-admins/configuration/rich-text-editor-configuration/rich-text-editor-customization.md#create-and-use-custom-editor-configurations) via the attribute's  `ConfigurationName` property.

```csharp title="Example - assign the rich text editor to a widget property"
using Kentico.PageBuilder.Web.Mvc;
using Kentico.Xperience.Admin.Base.FormAnnotations;

public class CustomWidgetProperties : IWidgetProperties
{
    // Assigns the 'RichTextComponent' as the editing component of the 'RichText' property
    [RichTextEditorComponent]
    public string RichText { get; set; }
}
```

When rendering the output of the rich text editor property for the live site, use the  `Html.Kentico().ResolveUrls` extension method to correctly resolve links within the rich text content.

```cshtml title="Example - resolve rich text content in views"
@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Web.Mvc

// A view model with the rich text content
@model CustomWidgetViewModel

...

// Displays the HTML content
<div class="fr-view">
    @Html.Kentico().ResolveUrls(Model.RichTextContent)
</div>
```

## HTML allowed in the editor

To improve security of the system, the editor sanitizes all user input and discards any HTML tags, attributes and URI values that are not allowed. By default, only the following items are allowed:

> **Info:** **Default allowed HTML attributes**
>
> "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"

> **Info:** **Default allowed HTML tags**
>
> "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"

> **Info:** **Allowed URIs**
>
> 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"

The default set of allowed HTML attributes and tags can be manually [extended](#allow-custom-attributes-and-tags) if required.

### Allow custom attributes and tags

If you wish to use tags and attributes other than the [default allowed HTML](#html-allowed-in-the-editor) in the rich text editor, you need to manually allow them as exceptions in the administration:

1. Open the **Settings** application.
2. Under **Content** navigate to **Rich Text Editor → Custom HTML attributes and tags**.
3. Enter the desired tags/attributes into the respective fields.
   - Enter the tags/attributes without double quotes and separate them by commas.
4. **Save** the settings.

The specified attributes and tags are now allowed in the rich text editor on top of the default set.

> **Note:** **Notes**:
>
> - When adding tags that require attributes, you need to add said tag and all of the required attributes. E.g., if you want to use `<a href=""></a>` you need to add the "_a_" tag as well as the "_href_" attribute.
> - When adding tags that can be empty (e.g., `<hr />`), you need to also add the tag in the [htmlAllowedEmptyTags option](https://froala.com/wysiwyg-editor/docs/options/#htmlAllowedEmptyTags) of the editor [configuration](https://docs.kentico.com/documentation/developers-and-admins/configuration/rich-text-editor-configuration/rich-text-editor-customization.md#define-editor-configurations).