---
title: TinyMCE custom style formats
slug: cms-13/docs/tinymce-custom-style-formats
docTags: 
createdAt: 2026-07-30T20:22:11.634Z
---

Custom style formats let you define text and element styles beyond the default options in the TinyMCE editor. Configure `StyleFormats` and `BlockFormats` to give content authors branded or structured formatting choices.

Go to the [TinyMCE documentation to configure style formats](https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats).

```csharp
public static class ServiceCollectionExtentions {
  public static IServiceCollection AddTinyMceConfiguration(this IServiceCollection services) {
    services.Configure<TinyMceConfiguration>(config => {
      config.For<StandardPage> (t => t.MainBody)
        .Toolbar("styles")
        .StyleFormats(
          new {
            title = "Bold text", inline = "strong"
          },
          new {
            title = "Red text", inline = "span", styles = new {
              color = "#ff0000"
            }
          },
          new {
            title = "Red header", block = "h1", styles = new {
              color = "#ff0000"
            }
          },
          new {
            title = "button link", classes = "btn btn-default", block = "a", inline = "span"
          }
        );
    });
    return services;
  }
}
```

## Localize formats

Localize style format labels so content authors see translated names in the TinyMCE editor.

Add the translations to your XML translations file as children of the element `<tinymce><editorstyles>`. The format title serves as the key in the XML.

:::hint{type="info"}
**Note**
The title must be lowercase and it must be a valid XML key. For example, you cannot use spaces.
:::

```csharp
config.For<StandardPage>(t => t.MainBody)
  .Toolbar("styles blocks")
  .AddSettingsTransform("localize-formats", (settings, content, propertyName) =>
  {
      var localizer = ServiceLocator.Current.GetInstance<LocalizationService>();

      settings.StyleFormats(
          new
          {
              title = localizer.GetString("/tinymce/editorstyles/paragraph1"), 
              inline = "strong"
          },
          new
          {
              title = localizer.GetString("/tinymce/editorstyles/header3"),
              inline = "span",
              styles = new { color = "#ff0000" }
          }
      );
  });
```

```xml
<languages>
	<language name="English" id="en">
		<tinymce>
			<editorstyles>
				<paragraph1>Body Text</paragraph1>
				<header1>Title</header1>
				<header2>Subtitle</header2>
				<header3>Section Heading</header3>
				<bold-text>Important Text</bold-text>
				<red-text>Warning Text</red-text>
				<red-header>Warning Heading</red-header>
			</editorstyles>
		</tinymce>
	</language>
	<language name="Svenska" id="sv">
		<tinymce>
			<editorstyles>
				<paragraph1>Brödtext</paragraph1>
				<header1>Rubrik</header1>
				<header2>Underrubrik</header2>
				<header3>Avsnittsrubrik</header3>
				<bold-text>Viktig Text</bold-text>
				<red-text>Varningstext</red-text>
				<red-header>Varningsrubrik</red-header>
			</editorstyles>
		</tinymce>
	</language>
</languages>
```

:::hint{type="warning"}
**Important**
Style formats with groupings are invisible, and no error message displays. To work around this issue, add a `module.config` file to the site root if you added your own style settings and plan to use a page type with rich text. This file indicates that the application is a module that receives its default settings like the other shell modules. The `module.config` file is not needed for anything else.
:::