Skip to content

Custom style formats

indigoxela edited this page Sep 16, 2023 · 26 revisions

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 unlink | backdropimage code",
        "plugins": "link backdroplink lists autoresize backdropimage code",
        "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": "Heading 5",
                "format": "h5"
            },
            {
                "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.

In style_formats you set the title to display in the styles dropdown (see toolbar settings).

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;
}
Clone this wiki locally