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.

Configuring tags and attributes allowed in the editor

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

  Copy

  
  
  
    "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

  Copy

  
  
  
    <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

  Copy

  
  
  
    "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

  Copy

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

• Widget
• Editing component
• Inline editor

Widget

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:

• the configuration dialogs or panels of page builder components (for example widgets)
• the properties panel or configuration dialogs of form builder components (form components or sections with properties)

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.

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; }

@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Web.Mvc

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

...

// Displays the HTML content
<div>
    @Html.Raw(Html.Kentico().ResolveRichText(Model.RichTextContent))
</div>

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.

@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
    Html.Kentico().RichTextEditor(nameof(Model.Properties.RichTextContent));
}
else
{
    // Displays the HTML content of the property
    <div>
        @Html.Raw(Html.Kentico().ResolveRichText(Model.Properties.RichTextContent))
    </div>
}

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