Truthwillout.Umbraco.RteStylesManager 2.0.0-beta

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher.
This is a prerelease version of Truthwillout.Umbraco.RteStylesManager.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package Truthwillout.Umbraco.RteStylesManager --version 2.0.0-beta
                    


                    

                
NuGet\Install-Package Truthwillout.Umbraco.RteStylesManager -Version 2.0.0-beta
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-beta" />
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-beta" />
                    


                            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-beta
                    


                    

                
#r "nuget: Truthwillout.Umbraco.RteStylesManager, 2.0.0-beta"
#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-beta
#: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-beta&prerelease
                    


                            Install as a Cake Addin
                        

                    

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


                            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
  • Updates rte-style-formats.json configuration

Installation

dotnet add package Truthwillout.Umbraco.RteStylesManager --version 2.0.0

Setup

1. Add MapControllers to Program.cs

Ensure MapControllers() is called in your endpoint configuration. This is required for the API controller to work:

app.UseUmbraco()
    .WithMiddleware(u =>
    {
        u.UseBackOffice();
        u.UseWebsite();
    })
    .WithEndpoints(u =>
    {
        u.EndpointRouteBuilder.MapControllers(); // Required for RTE Styles Manager
        u.UseBackOfficeEndpoints();
        u.UseWebsiteEndpoints();
    });

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. Add rte-style-formats.json to your project root

Copy the default rte-style-formats.json file to your project root. This file stores the style configuration. A default file is included with sample styles.

4. Restart and open the dashboard

After installing and building, restart your Umbraco application. The dashboard will be available in the backoffice under Settings > RTE Styles.

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 changes to take full effect

Important: After saving changes in the dashboard, you must restart the Umbraco application for the configuration to reload. The CSS files update immediately on save.

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
  • On application startup, the package generates initial CSS files from the config if they don't exist yet
  • The frontend loads rteFrontendStyles.css to display styles on published pages

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 114 2/20/2026
2.0.0-beta 94 2/20/2026
1.0.2 93 2/17/2026
1.0.1 95 2/17/2026
1.0.0 101 2/16/2026
1.0.0-beta.7 59 2/16/2026
1.0.0-beta.6 51 2/16/2026
1.0.0-beta.5 54 2/16/2026
1.0.0-beta.4 48 2/16/2026
1.0.0-beta.3 48 2/16/2026
1.0.0-beta.2 51 2/16/2026
1.0.0-beta.1 56 2/16/2026