Rich Text Editor Configuration

Toolbar

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

In the examble above, all 34 options have been enabled. The options include copy/paste buttons, font styles like bold and italics, bullet lists and options to embed videos and insert images.

Stylesheets

It is possible to define specific styles that can be used when editing content using the RTE. You can use as many of these styles with the RTE as you want.

The RTE styles are defined in CSS files which can be created in the Settings section. Read the RTE Styles article to learn more about this feature.

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.

Mode

The Rich Text Editor comes in two different modes: Classic and Distraction Free.

• Classic

  The default mode, which displays the toolbar in the top.
• Distraction Free

  In this mode the toolbar is hidden, and only shows up when content in the editor is highlighted.

Overlay Size

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

Hide Label

When this option is checked the label and description for the RTE property will be hidden.

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.

Image Upload Folder

Images added through the RTE is 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.

Advanced Configuration

The RTE can also accept advanced configuration through the appSettings.json file fed into the TinyMCE configuration. This is within Umbraco:CMS:RichTextEditor and allows you to configure the following:

• Commands

• Plugins

• CustomConfig

• ValidElements

• InvalidElements

CustomConfig is slightly different from the rest as it extends the core config passed into TinyMCE.

Allowing script tags in the RTE

Sometimes you want to allow your content editors to be able to add <script> tags into the RTE. This tag is classed as invalid by default which means the configuration needs to be updated to allow it. This is not something that can be done through the CMS and requires advanced configuration in the appSettings.json file. It uses the ValidElements property to append ,script[*] to the pre-existing list of valid elements as shown below.

{
  "Umbraco": {
    "CMS": {
      "RichTextEditor": {
        "ValidElements": "+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
        ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],-strike[class|
        style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],img[id|dir|lang|longdesc|
        usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|
        onresizeend|rel|data-id],-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|
        summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],
        tbody[id|class],thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
        -th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
        -span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],
        -h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],
        small[class|style],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],
        object[class|id|width|height|codebase|*],param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],
        area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],figure,figcaption,video[*],audio[*],picture[*],source[*],canvas[*],script[*]"
      }
}

Alias: Umbraco.TinyMCE

Returns: HTML

The Rich Text Editor (RTE) is based on tinymce and is highly configurable. Depdending on the configuration, it will give your content editors more flexibility when working with content that should be more than only plain text.

Configuration options

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

RTE Styles

Use CSS to define specific editor styles and add them to the RTE.

Data Type Definition Example

Content Example

MVC View Example

Without Modelsbuilder

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

With Modelsbuilder

@{
    if (!string.IsNullOrEmpty(Model.RichText.ToString()))
    {
        <p>@Model.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 define specific styles and fonts for the Rich Text Editor (RTE). Once you've defined the styles, and enabled them on the RTE Data Type, the styles can be accessed directly in the content section.

Creating RTE Styles

The RTE styles are created and managed in the Umbraco backoffice.

Find the Stylesheets folder in the Settings section. Right-click the folder, select 'Create...' and choose New Rich Text Editor style sheet file. Give the new stylesheet a name and Save it - this will generate an empty CSS file.

At this point, you can start adding specific styles, that your editors can then use in the content section when creating and writing new content.

The image above is an example of how an RTE style can be configured. When working with these styles, the Preview feature will show you how the style will look when applied.

Every style you add, will automatically be added to the CSS file. The file will be placed in the same location as the rest of your CSS files. It's possible to edit the file directly from the backoffice as well. Access it from the Code tab in the top-right corner.

Using RTE Styles

In order for your editors to be able to use the styles when working with content, two things needs to be done.

1. Enable "Style select"

The styles will be accessed by the editors using the "Formats" dropdown in the toolbar of the RTE. In order the enable the dropdown, the "Style select" toolbar option needs to be checked.

This can be done through the Content section using infinite editing, or by finding and editing the RTE Data Type in the Settings section of the backoffice. Learn more about the configuration options in the RTE Config article.

2. Select the styles

You can have as many different styles for your RTEs as you want. You might want to have different styles for different RTE Data Types.

When configuring your RTE Data Types, you can select which stylesheets your content editors should be able to use.