A visual dashboard for managing Umbraco Rich Text Editor styles and colors. Easily add, edit, and organize text styles with color pickers, live previews, and automatic CSS generation.
Get Started
$ dotnet add package Truthwillout.Umbraco.RteStylesManagerReadme
RTE Styles Manager for Umbraco 17
A visual dashboard for managing Rich Text Editor styles and colours in Umbraco 17.
Features
- Colour picker for each style with live preview
- Add, edit, and delete styles easily
- Group styles into collapsible categories (Headers, Text, etc.)
- Reorder styles with up/down arrows
- Automatically generates CSS files for both the backoffice and frontend
- Style menu integration with the TipTap Rich Text Editor
Installation
dotnet add package Truthwillout.Umbraco.RteStylesManager --version 2.0.0
Setup
1. Add MapControllers to Program.cs
Add MapControllers() inside WithEndpoints in your Program.cs:
app.UseUmbraco()
.WithMiddleware(u =>
{
u.UseBackOffice();
u.UseWebsite();
})
.WithEndpoints(u =>
{
u.UseBackOfficeEndpoints();
u.UseWebsiteEndpoints();
u.EndpointRouteBuilder.MapControllers();
});
2. Add the frontend CSS to your layout
Add the following line to the <head> of your master layout so that the RTE styles display correctly on your published pages:
<link href="/css/rteFrontendStyles.css" rel="stylesheet">
3. Initialise the configuration
Go to Settings > RTE Styles in the Umbraco backoffice and click Save Configuration. This creates the initial configuration file and removes the startup error.
4. Restart Umbraco
Restart your Umbraco application for the changes to take effect.
5. Configure the Rich Text Editor data type
Go to Settings > Data Types and open your Rich Text Editor data type:
- Add RTE Custom Styles to the toolbar actions
- Under Stylesheets at the bottom, add rteBackofficeStyles.css
- Save the data type
Usage
- Go to Settings > RTE Styles in the Umbraco backoffice
- Add or edit styles using the colour picker and form fields
- Organise styles into categories - collapse/expand them by clicking the category header
- Click Save Configuration to save your changes and generate the CSS files
- Restart your Umbraco application for the style menu to update
How it works
- Styles are stored in
rte-style-formats.jsonin your project root - On save, CSS is generated and written to
wwwroot/css/rteFrontendStyles.cssandwwwroot/css/rteBackofficeStyles.css - A TipTap style menu manifest is generated at
wwwroot/App_Plugins/RteStyleManagerStyles/umbraco-package.json - On application startup, the package generates CSS files and the style menu from the config
- The frontend loads
rteFrontendStyles.cssto display styles on published pages - The backoffice loads
rteBackofficeStyles.cssvia the data type stylesheet configuration
Requirements
- Umbraco 17.0+
- .NET 10
Version History
- 2.0.0 - Umbraco 17 support (Bellissima backoffice, Lit web components, TipTap RTE)
- 1.x - Umbraco 13 support (AngularJS backoffice, TinyMCE RTE)
License
MIT License - Copyright Truthwillout 2025