TinyMCE custom style formats

3 min

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 is 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, write the style formats from the previous example in lowercase and with no spaces. In this case, you replace the spaces with dashes.

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");

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