Configuring the rich text editor for page builder

The rich text editor available for the page builder 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 or implementing custom plugins.

The system uses an implementation of the Froala WYSIWYG editor.

Froala versions

Xperience uses the following Froala editor versions:

Xperience versionFroala version
13.0.82 and newer4.0.14

Editing content using the Rich text widget in the page builder

On this page

In this section

Configuring tags and attributes allowed in the editor

Note: This feature is only available after applying hotfix 13.0.110 or newer.

To improve the security of the system, the editor sanitizes all user input and discards any HTML tags and attributes that are not allowed. However, 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.

    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"
    Web.config - default value
    <add key="CMSHtmlSanitizerAllowedTags" value="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" />

  • CMSHtmlSanitizerAllowedAttributes – Specifies a set of HTML attributes that can be used in the editor. Setting this key replaces the default set of allowed attributes.

    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"
    Web.config - default value
    <add key="CMSHtmlSanitizerAllowedAttributes" value="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" />

Enabling users to add rich text content in the page builder

There are several ways to include the editor in the page builder interface:


The Rich text widget is one of the default widgets available in the system. This widget can be extended to include custom functionality.

Editing component

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

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.

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
public string RichTextProperty { get; set; }
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

Inline editor

The rich text inline editor 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.

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<CustomWidgetProperties>


// Evaluates if the view is displayed in the edit mode of the page builder
@if (Context.Kentico().PageBuilder().EditMode)
	// Displays the inline editor
	// Displays the HTML content of the property

Customizing the rich text inline editor toolbar

To customize the toolbar 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.

// Displays the inline editor with a specified toolbar configuration
Html.Kentico().RichTextEditor(nameof(Model.Properties.RichTextContent), "simpleToolbar");