Truthwillout.Umbraco.RteStylesManager 2.0.0

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher. 
dotnet add package Truthwillout.Umbraco.RteStylesManager --version 2.0.0
                    


                    

                
NuGet\Install-Package Truthwillout.Umbraco.RteStylesManager -Version 2.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Truthwillout.Umbraco.RteStylesManager" Version="2.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Truthwillout.Umbraco.RteStylesManager" Version="2.0.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Truthwillout.Umbraco.RteStylesManager" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Truthwillout.Umbraco.RteStylesManager --version 2.0.0
                    


                    

                
#r "nuget: Truthwillout.Umbraco.RteStylesManager, 2.0.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Truthwillout.Umbraco.RteStylesManager@2.0.0
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Truthwillout.Umbraco.RteStylesManager&version=2.0.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Truthwillout.Umbraco.RteStylesManager&version=2.0.0
                    


                            Install as a Cake Tool

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

  1. Go to Settings > RTE Styles in the Umbraco backoffice
  2. Add or edit styles using the colour picker and form fields
  3. Organise styles into categories - collapse/expand them by clicking the category header
  4. Click Save Configuration to save your changes and generate the CSS files
  5. Restart your Umbraco application for the style menu to update

How it works

  • Styles are stored in rte-style-formats.json in your project root
  • On save, CSS is generated and written to wwwroot/css/rteFrontendStyles.css and wwwroot/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.css to display styles on published pages
  • The backoffice loads rteBackofficeStyles.css via 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

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
2.0.0 98 2/20/2026
2.0.0-beta 87 2/20/2026
1.0.2 88 2/17/2026
1.0.1 91 2/17/2026
1.0.0 97 2/16/2026
1.0.0-beta.7 53 2/16/2026
1.0.0-beta.6 45 2/16/2026
1.0.0-beta.5 47 2/16/2026
1.0.0-beta.4 43 2/16/2026
1.0.0-beta.3 43 2/16/2026
1.0.0-beta.2 47 2/16/2026
1.0.0-beta.1 51 2/16/2026