Feature - Rich Text Editor

Create and format content using Umbraco's Tiptap rich text editor, wrapped in the standard feature composition pattern

What It Does#

The most commonly used feature for adding formatted text content

The Rich Text Editor feature wraps Umbraco's built-in Tiptap rich text editor in the standard feature composition pattern. It gives content editors a familiar WYSIWYG editing experience for creating formatted text with headings, lists, links, images, and other HTML elements.

This is the workhorse feature of UmBootstrap — most content on a typical page is delivered through one or more Rich Text Editor blocks. Each block can have its own title, description, and summary via the shared feature compositions, with the rich text content forming the main body.

For readable line lengths, keep RTEs in areas up to 6 columns wide (WCAG 1.4.8 recommends 55–75 characters per line).

How It Works#

A minimal view that delegates everything to the feature layout and Umbraco's editor

The view is one of the simplest in UmBootstrap — just a single line that outputs the RichTextContent property. The feature layout (_Layout_Features.cshtml) handles the title, description, and summary rendering, so the view only needs to render the rich text body.

The feature element type composes featureComponentRichTextEditor which provides the richTextContent property using Umbraco's Tiptap editor. The editor toolbar and available formatting options are configured on the DataType in the Umbraco backoffice.

The view uses the strongly-typed ModelsBuilder model FeatureRichTextEditor, so the property access is Model.Content.RichTextContent rather than the untyped Model.Content.Value("richTextContent").

On this page

featureRichTextEditor.cshtml#

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<FeatureRichTextEditor>>

@{
    Layout = "_Layout_Features.cshtml";
}

@Model.Content.RichTextContent