HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback

Custom style formats

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

See the TinyMCE documentation for information about configuring style formats: [https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats)

public static class ServiceCollectionExtentions
        public static IServiceCollection AddTinyMceConfiguration(this IServiceCollection services)
            services.Configure<TinyMceConfiguration>(config =>
                config.For<StandardPage>(t => t.MainBody)
                        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 . The title of the format will be used as the key in the XML.



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 would need to be rewritten in lowercase and with no spaces. In this case the spaces have been replaced with dashes.

config.For<StandardPage>(t => t.MainBody)
        .Toolbar("styles blocks")
            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" } }
      <language name="English" id="en">
            <paragraph1>Body Text</paragraph1>
            <header3>Section Heading</header3>
            <bold-text>Important Text</bold-text>
            <red-text>Warning Text</red-text>
            <red-header>Warning Heading</red-header>
      <language name="Svenska" id="sv">
            <bold-text>Viktig Text</bold-text>



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

What’s Next