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

Add the translations to an XML file. Add translation strings as children of the element editorstyles. The following example shows the CSS and XML. This also applies to block formats and style formats, just add the title as the key in the XML. The title must be a valid XML key; for example, you cannot use spaces.

XML

<language name="svenska" id="sv">
  <tinymce>
    <editorstyles>
      <my-class>Min klass</my-class>
      <header.dim>Nedtonad rubrik</header.dim>
    </editorstyles>
  </tinymce>
</language>

Custom Css

.header.dim {
    margin: 2% 0;
    opacity: 0.3;
}

.my-class {
    color: red;
}

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/