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.

Editing content using the Rich text widget in the page builder

In this section

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

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 from the configuration dialogs or panels of page builder components (for example custom widgets).

To assign the rich text editor to a property of a page builder component, edit the page builder 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 page builder component
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; }
Example - View of a page builder component
@using Kentico.PageBuilder.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.

Example - View of a widget
@using Kentico.PageBuilder.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>
}

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");

Was this page helpful?