Schema Alias: Umbraco.RichText UI Alias: Umb.PropertyEditorUi.TipTap

Returns: HTML

The Rich Text Editor (RTE) Tiptap property editor is highly configurable and based on Tiptap. Depending on the configuration setup, it provides editors a lot of flexibility when working with content.

Configuration options

Customize everything from toolbar options to editor size to where pasted images are saved.

Blocks

Use Blocks to define specific parts that can be added as part of the markup of the Rich Text Editor.

Extensions

Extend the functionality of the Rich Text Editor with extensions.

Data Type Definition Example

Content Example

MVC View Example

With Modelsbuilder

@{
    if (!string.IsNullOrEmpty(Model.RichText.ToString()))
    {
        <p>@Model.RichText</p>
    }
}

Without Modelsbuilder

@{
    if (Model.HasValue("richText")){
        <p>@(Model.Value("richText"))</p>
    }
}

Add values programmatically

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the Content Service.

@using Umbraco.Cms.Core.Services;
@inject IContentService Services;
@{
    // Get access to ContentService
    var contentService = Services;

    // Create a variable for the GUID of the page you want to update
    var guid = Guid.Parse("32e60db4-1283-4caa-9645-f2153f9888ef");

    // Get the page using the GUID you've defined
    var content = contentService.GetById(guid); // ID of your page

    // Create a variable for the desired value
    var htmlValue = new HtmlString("Add some text <strong>here</strong>");

    // Set the value of the property with alias 'richText'.
    content.SetValue("richText", htmlValue);

    // Save the change
    contentService.Save(content);
}

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

@{
    // Get the page using it's id
    var content = contentService.GetById(1234);
}

If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string.

@using Umbraco.Cms.Core.PublishedCache;
@inject IPublishedSnapshotAccessor _publishedSnapshotAccessor;
@{
    // Set the value of the property with alias 'richText'
        content.SetValue(Home.GetModelPropertyType(_publishedSnapshotAccessor, x => x.RichText).Alias, "Add some text <strong>here</strong>");
}

It is possible to insert Blocks into the markup of the Rich Text Editor. Block can be created directly inside the Rich Text editor when

• You have defined the Block Type as part of the RTE Data Type, and

• Enabled the Blocks Toolbar Option.

Configure Blocks

The Block List property editor is configured in the same way as any standard property editor, via the Data Types admin interface.

To set up your Block List Editor property, create a new Data Type and select Block List from the list of available property editors.

Then you will see the configuration options for a Block List as shown below.

The Data Type editor allows you to configure the following properties:

• Available Blocks - Here you will define the Block Types to be available for use in the property. Read more on how to set up Block Types below.

• Blocks Live editing mode - Enabling this will edit a Block directly to the Rich Text Editor, making changes appear as you type.

Setup Block Types

Block Types are Element Types that need to be created before you can start configuring them as Block Types. This can be done either directly from the property editor setup process, or you can set them up beforehand. If they are set beforehand then they need to be added to the Rich Text Editor afterward.

Once you add an Element Type as a Block Type on your Rich Text Editor Data Type you will have options to configure it further.

Each Block has a set of properties that are optional to configure. They are described below.

Editor Appearance

By configuring the properties in the group you can customize the experience for your editors when they work with blocks in the Content section.

• Display Inline with text - When turned on the Block Element will be able to stay in line with text or other elements. If not the Block will stay on its own line.

• Custom view - Overwrite the AngularJS view for the block presentation in the Content editor. Use this to make a more visual presentation of the block or even make your own editing experience by adding your own AngularJS controller to the view.

• Custom stylesheet - Pick your own stylesheet to be used for this block in the Content editor. By adding a stylesheet the styling of this block will become scoped. Meaning that backoffice styles are no longer present for the view of this block.

• Overlay editor size - Set the size for the Content editor overlay for editing this block.

Data Models

It is possible to use two separate Element Types for your Block Types. It's required to have one for Content and optional to add one for Settings.

• Content model - This presents the Element Type used as a model for the content section of this Block. This cannot be changed, but you can open the Element Type to perform edits or view the properties available. Useful when writing your Label.

• Settings model - Add a Settings section to your Block based on a given Element Type. When picked you can open the Element Type or choose to remove the settings section again.

Catalogue appearance

These properties refer to how the Block is presented in the Block catalog when editors choose which Blocks to use for their content.

• Background color - Define a background color to be displayed beneath the icon or thumbnail. Eg. #424242.

• Icon Color - Change the color of the Element Type icon. Eg. #242424.

• Thumbnail - Pick an image or Scalable Vector Graphics (SVG) file to replace the icon of this Block in the catalog.

The thumbnails for the catalog are presented in the format of 16:10, and we recommend a resolution of 400px width and 250px height.

Advanced

These properties are relevant when you work with custom views.

• Force hide content editor - If you made a custom view that enables you to edit the content part of a block and you are using default editing mode (not inline) you might want to hide the content editor from the block editor overlay.

Rendering Blocks

To render Blocks in the frontend, you must create Partial Views for each Block.

The Partial Views must be:

• Named by the alias of the Element Type that is being used as the Content Model for the Block.

• Placed in the folder Views/Partials/RichText/Components/.

For example, if the Element Type alias of the Content Model is myBlockType, a Partial View must be created at Views/Partials/RichText/Components/MyBlockType.cshtml.

The Partial View will receive the model of Umbraco.Cms.Core.Models.Blocks.RichTextBlockItem. This gives you the option to access properties of the Content and Settings Models of your Block, as illustrated in the following sample:

If you use ModelsBuilder, you can specify the Content Model (and optionally the Settings Model) in the Partial View model. This allows for type-safe access to the Block data.

The following example shows a Partial View of a Block with MyBlockType as the Content Model and MyBlockSettingsType as the Settings Model:

Build a Custom Backoffice View

In this article you can learn about the different options you have for configuring the Rich Text Editor (RTE).

Toolbar

You have full control over which options should be available on the RTE.

In the example above, all 27 options have been enabled. These options include font styles like bold and italics, bullet lists, and options to embed videos and insert images.

You can customize the look of the toolbar:

• Enhance the capabilities of the toolbar by enabling or disabling extensions.

• Use the Toolbar designer to group together items and add additional rows if needed.

Dimensions

Define height and width of the editor displayed in the content section.

Maximum size for inserted images

Define the maximum size for images added through the Rich Text Editor.

If inserted images are larger than the dimensions defined here, the images will be resized automatically.

Overlay Size

Select the width of the link picker overlay. The overlay size comes in three sizes: Small, Medium, Large, and Full.

Available Blocks

Image Upload Folder

Images added through the RTE are by default added to the root of the Media library.

Sometimes you might want to add the images to a specific folder. This folder can be configured using the "Image Upload Folder" setting.

Ignore User Start Nodes

Some of the backoffice users might be restricted to a specific part of the content tree. When the "Ignore User Start Nodes" is checked, the users can pick any piece of content from the content tree, when adding internal links through the RTE.

The Rich Text Editor (RTE) in Umbraco is based on the open-source editor Tiptap.

Out of the box, Tiptap has limited capabilities and everything is an extension by design. Basic text formatting features such as bold, italic, and underline are their own extensions. This offers great flexibility, making the rich text editor highly configurable. The implementation in Umbraco offers a wide range of built-in extensions to enhance the Tiptap editor capabilities.

Using the same extension points, this article will show you how to add a custom extension to the rich text editor.

Native Tiptap extensions

Tiptap has a library of supported native extensions. You can find a list of these extensions on the Tiptap website. While many of these are open source, there are also pro extensions available for commercial subscriptions.

Tiptap extension types

There are two types of extension: tiptapExtension and tiptapToolbarExtension.

The tiptapExtension extension is used to register a native Tiptap Extension. These will enhance the capabilities of the rich text editor itself. For example, to enable text formatting, drag-and-drop functionality and spell-checking.

The tiptapToolbarExtension extension adds a toolbar action that interacts with the Tiptap editor (and native Tiptap extensions).

Adding a native extension

In this example, you will take the native Tiptap open-source extension Highlight. Then register it with the rich text editor and add a toolbar button to invoke the Task List action.

1. Install the Highlight extension from the npm registry.

npm install @tiptap/extension-highlight

1. Create the code to register the native Tiptap extensions in the rich text editor.

import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap';
import { Highlight } from '@tiptap/extension-highlight';

export default class UmbTiptapHighlightExtensionApi extends UmbTiptapExtensionApiBase {
	getTiptapExtensions = () => [Highlight];
}

1. Create the toolbar action to invoke the Highlight extension.

import { UmbTiptapToolbarElementApiBase } from '@umbraco-cms/backoffice/tiptap';
import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';

export default class UmbTiptapToolbarHighlightExtensionApi extends UmbTiptapToolbarElementApiBase {
    override execute(editor?: Editor) {
        editor?.chain().focus().toggleHighlight().run();
    }
}

Once you have the above code in place, they can be referenced in the package manifest file.

{
    "name": "My Tiptap Extension",
    "version": "1.0.0",
    "extensions": [
        {
            "type": "tiptapExtension",
            "alias": "My.Tiptap.Highlight",
            "name": "My Highlight Tiptap Extension",
            "api": "/App_Plugins/MyTiptapExtension/highlight.tiptap-api.js",
            "meta": {
                "icon": "icon-thumbnail-list",
                "label": "Highlight",
                "group": "#tiptap_extGroup_formatting"
            }
        },
        {
            "type": "tiptapToolbarExtension",
            "kind": "button",
            "alias": "My.Tiptap.Toolbar.TaskList",
            "name": "My Highlight Tiptap Toolbar Extension",
            "api": "/App_Plugins/MyTiptapExtension/highlight.tiptap-toolbar-api.js",
            "meta": {
                "alias": "highlight",
                "icon": "icon-brush",
                "label": "Highlight"
            }
        }
    ]
}

Upon restarting Umbraco, the new extension and toolbar action will be available in the Tiptap Data Type configuration settings.

The following steps will guide you through changing the property editor used for rich text on an existing Document Type.

Create a new Data Type

The first step in this guide is to create a new Rich Text Editor Data Type using the Tiptap property editor.

As an alternative, you can create a new Data Type using the Tiptap property editor when updating the Document Type.

1. Navigate to the Settings section of the Umbraco Backoffice.

2. Select + next to the Data Types folder.

3. Select New Data Type....

1. Give the new Data Type a name.

2. Click Select a property editor.

3. Choose Rich Text Editor [Tiptap].

1. Configure the Data Type to match your needs.

2. Save the Data Type.

Update the Document Type(s)

Once you have prepared the new Data Type you need to update the Document Types that should use it.

1. Expand the Document Types folder.

2. Select a Document Type that needs to be updated.

3. Click on the Property used for rich text.

1. Hover over the selected property editor and click Change.

2. Search for the newly created Data Type and select it.

1. Submit the changes.

2. Save the Document Type.

3. Repeat steps 2-7 for each Document Type that needs to use the new Data Type.

Verify your content

When you have updated all the relevant Document Types, it is recommended to verify the content that uses the Rich Text Editor.