-
Notifications
You must be signed in to change notification settings - Fork 1
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;
}