Dev GuideAPI ReferenceUser Guide
HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
Legal TermsGitHubNuGetDev CommunityOptimizely AcademySubmit a ticket

TinyMCE custom style formats

Describes how to add more advanced style formats for text and other elements to the TinyMCE editor.

Suggest Edits

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

Updated 6 months ago

Next