Truthwillout.Umbraco.RteStylesManager 1.0.2

dotnet add package Truthwillout.Umbraco.RteStylesManager --version 1.0.2
                    
NuGet\Install-Package Truthwillout.Umbraco.RteStylesManager -Version 1.0.2
                    
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="1.0.2" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Truthwillout.Umbraco.RteStylesManager" Version="1.0.2" />
                    
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 1.0.2
                    
#r "nuget: Truthwillout.Umbraco.RteStylesManager, 1.0.2"
                    
#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@1.0.2
                    
#: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=1.0.2
                    
Install as a Cake Addin
#tool nuget:?package=Truthwillout.Umbraco.RteStylesManager&version=1.0.2
                    
Install as a Cake Tool

RTE Styles Manager for Umbraco

A visual dashboard for managing Rich Text Editor styles and colours in Umbraco 13.

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 and syncs with TinyMCE configuration

Installation

dotnet add package Truthwillout.Umbraco.RteStylesManager

Build your project after installing. The package will automatically copy the required files to your project:

  • App_Plugins/RteStyleManager/ - Dashboard UI files
  • wwwroot/css/rteFrontendStyles.css - Frontend styles
  • wwwroot/css/rteBackofficeStyles.css - Backoffice RTE editor styles
  • rte-style-formats.json - Default style configuration

Setup

1. Add the frontend CSS to your layout

Add the following line to the <head> of your master layout (e.g. Views/master.cshtml) so that the RTE styles display correctly on your published pages:

<link href="/css/rteFrontendStyles.css" rel="stylesheet">

2. 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 Manager.

Usage

  1. Go to Settings > RTE Styles Manager 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 styles to appear in the RTE format dropdown

Important: After saving changes in the dashboard, you must restart the Umbraco application for the style format dropdown in the Rich Text Editor to update. The CSS files update immediately, but the TinyMCE style_formats configuration is loaded on application startup.

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 reads rte-style-formats.json and sets the TinyMCE style_formats and content_css configuration
  • The backoffice RTE editor loads rteBackofficeStyles.css so styles are visible while editing
  • The frontend loads rteFrontendStyles.css to display styles on published pages

Requirements

  • Umbraco 13.0+
  • .NET 8.0

License

MIT License - Copyright Truthwillout 2025

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 was computed.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  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
1.0.2 24 2/17/2026
1.0.1 28 2/17/2026
1.0.0 43 2/16/2026
1.0.0-beta.7 40 2/16/2026
1.0.0-beta.6 32 2/16/2026
1.0.0-beta.5 35 2/16/2026
1.0.0-beta.4 33 2/16/2026
1.0.0-beta.3 31 2/16/2026
1.0.0-beta.2 34 2/16/2026
1.0.0-beta.1 39 2/16/2026