Rich text editor setup

✖
Copy to clipboard

The rich text editor available in the admin UI allows users to input content using conventional word processor features. The editor is based on the Froala WYSIWYG editor.

The editor provides various customization options:

Use the rich text editor

The editor can be assigned to:

Field editor

You can assign the rich text editor form component to fields of the Rich text (HTML) type. To use editors with custom configurations, select the configuration in the component’s Configuration name property.

Editing component

The rich text editing component allows users to input rich text content in:

To use the editor as an editing component, annotate required properties with the RichTextEditorComponent attribute. Assign custom configurations via the attribute’s ConfigurationName property.

C#
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
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:

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”

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”

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 if required.

Allow custom attributes and tags

If you wish to use tags and attributes other than the default allowed HTML 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.

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 of the editor configuration.