Loading...
Area: Optimizely CMS
Applies to versions: 3 and higher
Other versions:

Custom style formats and localizing style sheets

Recommended reading 

This option enables you to add more advanced style formats for text and other elements to the editor. See the TinyMCE documentation for information about configuring style formats: https://www.tiny.cloud/docs-4x/configure/content-formatting/#style_formats

public static class ServiceCollectionExtentions
{
    public static IServiceCollection AddTinyMceConfiguration(this IServiceCollection services)
    {
        services.Configure<TinyMceConfiguration>(config =>
        {
            config.For<StandardPage>(t => t.MainBody)
                .Toolbar("styleselect")
                .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;
    }
}

Localizing formats

Add the translations to your XML translations file as children of the element <tinymce><editorstyles>. The title of the format will be 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 would need to be rewritten in lowercase and with no spaces. In this case the spaces have been replaced with dashes.

C# Configuration

config.For<StandardPage>(t => t.MainBody)
    .Toolbar("styleselect formatselect")
    .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");

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>
Do you find this information helpful? Please log in to provide feedback.

Last updated: Sep 28, 2021

Recommended reading