TinyMCE custom style formats

3 min

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.

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.

📘 Note The title must be lowercase and it must be a valid XML key. For example, you cannot use spaces.

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" }
          }
      );
  });

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

🚧 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.