Loading...

Last updated: Aug 23 2018

Area: Episerver CMS Applies to versions: TinyMCE v2 and higher
Other versions:

Custom style formats and localizing style sheets

See the TinyMCE documentation for information about configuring style formats: https://www.tinymce.com/docs/configure/content-formatting/#style_formats

[ModuleDependency(typeof(TinyMceInitialization))]
public class CustomizedTinyMceInitialization : IConfigurableModule
{
    public void Initialize(InitializationEngine context)
    {
    }

    public void Uninitialize(InitializationEngine context)
    {
    }

    public void ConfigureContainer(ServiceConfigurationContext context)
    {
        context.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" } }
                );
        });
    }
}

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.

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

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 have feedback on this documentation? Send an email to documentation@episerver.com. For development-related questions and discussions, refer to our Forums on https://world.episerver.com/forum/