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.
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.
In order for your editors to be able to use the styles when working with content, two things needs to be done.
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.
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.
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.
Customize everything from toolbar options to editor size to where pasted images are saved.
Use CSS to define specific editor styles and add them to the RTE.
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.
The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.
Although the use of a GUID is preferable, you can also use the numeric ID to get the page:
If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:
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.
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.
Define height and width of the editor displayed in the content section.
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.
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.
Select the width of the link picker overlay. The overlay size comes in three sizes: Small, Medium, and Large.
When this option is checked the label and description for the RTE property will be hidden.
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.
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.
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:
CustomConfig is slightly different from the rest as it extends the core config passed into TinyMCE.
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.
