RTE Styles Manager

The inspiration

i first thought about this package in early october 2025 while working on a client site. they needed the ability to choose text colours and sizes directly within a rich text editor. at the time it felt like such a simple feature, but the implementation turned out to be overly complicated and time consuming. from that moment i knew there had to be a better way, so i started building a package that solves this problem cleanly and efficiently.

What it does

this package adds a dedicated rte styles manager inside the umbraco settings dashboard, giving editors and developers a visual interface for managing rich text editor styles and colours.

once installed from nuget (Truthwillout.Umbraco.RteStylesManager), the package provides:

• a colour picker for each style with live preview

• fields for css class, display name, size (eg h2, h3, bold etc) and colour

• the ability to group styles into categories like headers or text

• reorderable styles with simple up/down controls

• automatic css generation for both backoffice and frontend

• updates to the tinyMCE style_formats configuration so your custom options show in the toolbar

all of this runs inside the umbraco backoffice under settings > rte styles manager, where you can add, edit and delete styles without touching code. after saving your configuration you need to restart umbraco for the new style formats to load into the rich text editor.

Why this matters

rich text editing should be fast for content editors and simple for developers to maintain.

without this package, defining colours and custom text sizes means either manually editing stylesheets and configuration or relying on complex appsettings json formats. this slows editors down and forces developers to get involved for tiny changes. with the rte styles manager, your editors can manage and preview styles themselves, and developers get clean, generated css ready to use.

How it works

when you save your style configuration in the dashboard, the package:

1. writes your definitions to a rte-style-formats.json file

2. generates two css files, one for the backoffice editor and one for your frontend output

3. updates tinyMCE’s style formats on application start so they appear in the rte dropdown

4. ensures the editor loads the backoffice css so the styles show correctly while editing content

this gives you consistent styles in both the editor and in the published site.

Getting started

1. install the package with:

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

2. build and restart your umbraco project

3. open settings > rte styles manager in the backoffice

4. define your styles using the intuitive form and colour picker

5. save and restart again for the styles to show in your rte toolbar

once you’ve done that, your rich text editors will include your custom formats whenever content editors work with text.

If you have any ideas of how to improve the package or if there's anything you'd like to see in there, don't be shy to let me know, or make a pull request in github!

If you want faster, cleaner rich text customisation in umbraco without unnecessary complexity, this package gives you full control right from the backoffice.