TinyMCE custom style formats

3 min

See the TinyMCE documentation for configuring 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

Add the translations to your XML translations file as children of the element <tinymce><editorstyles>. The title of the format is used 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.

So, the style formats from the previous example must be rewritten in lowercase and with no spaces. In this case, the spaces are replaced with dashes.

config.For<StandardPage>(t => t.MainBody)
  .Toolbar("styles blocks")
  .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"
      }
    }
  )
  .BlockFormats("paragraph1=p;header1=h1;header2=h2;header3=h3");

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

Caution In CMS 12, style formats with groupings are invisible and no error message displays. To workaround this issue until it is fixed—if you added your own style settings and plan to use a page type with rich text—add module.config to the site root which indicates that the application is a module that should get its default settings like the other shell modules. (The module.config file is not needed for anything else).