Custom style formats

Currently, there's no admin UI for adding custom styles, yet. Custom styles are CSS classes applied to HTML tags, not to get confused with snippets, which are supposed to be more complex – there's a plugin for snippets.

In order to add custom styles (formats), you'd have to edit the JSON config file for the TinyMCE profile you are using.

Quick example:

{
    "_config_name": "tinymce.profiles.testing",
    "name": "testing",
    "label": "Testing",
    "filter_allowed_html": "a,em,strong,cite,blockquote,ul,ol,li,h3,h4,h5,p,span",
    "tiny_options": {
        "toolbar": "bold italic blockquote | styles | bullist numlist | backdroplink backdropunlink | backdropimage code",
        "plugins": "backdroplink lists autoresize backdropimage",
        "contextmenu": "backdropimage backdroplink",
        "formats": {
            "mycustom": {
                "selector": "p",
                "classes": "my-class"
            },
            "small": {
                "inline": "span",
                "classes": "small"
            },
            "x-large": {
                "inline": "span",
                "classes": "x-large"
            }
        },
        "style_formats": [
            {
                "title": "Paragraph",
                "format": "p"
            },
            {
                "title": "Heading 3",
                "format": "h3"
            },
            {
                "title": "Heading 4",
                "format": "h4"
            },
            {
                "title": "My custom",
                "format": "mycustom"
            },
            {
                "title": "Small text",
                "format": "small"
            },
            {
                "title": "Large text",
                "format": "x-large"
            }
        ]
    }
}

In formats you define your custom block or inline formats and which classes TinyMCE should apply. Also see formats in TinyMCE docs.

In style_formats you define the elements to display in the styles dropdown (see toolbar settings). There you can set the order of elements and define the title to display your custom formats.

The actual styles should go to a CSS file (in your theme), and that could get added to the "Content CSS files" admin setting on /admin/config/content/formats/FORMAT.

Example CSS in your theme:

p.my-class {
  font-size: 2rem;
  color: blue;
}
span.small {
  font-size: .7rem;
}
span.x-large {
  font-size: 2rem;
}