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 (opens in a new tab) WYSIWYG editor.
The editor provides various customization options:
The editor can be assigned to:
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.
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.
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.
@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>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", "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", "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", "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.
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:
The specified attributes and tags are now allowed in the rich text editor on top of the default set.
Notes:
<a href=""></a> you need to add the "a" tag as well as the "href" attribute.<hr />), you need to also add the tag in the htmlAllowedEmptyTags option (opens in a new tab) of the editor configuration.