Using TinyMCE6, i want to use custom style formats with custom classes but these custom classes don't work: they're not present in html code.
Here the instantiation of tinyMce:
tinymce.init({
content_css: "css/custom_content.css",
height: "1000px",
style_formats: [
{
title: 'Titre 1',
block: 'h1',
classes: 'title is-1',
exact: true
},
{
title: 'Titre 2',
block: 'h2',
classes: 'title is-2',
exact: true
},
{
title: 'Titre 3',
block: 'h3',
classes: 'title is-3',
exact: true
},
{
title: 'Paragraphe',
block: 'p',
classes: 'is-size-5 py-2',
exact: true
}],
selector: 'textarea',
theme_advanced_buttons1: "styleselect",
language: 'fr_FR',
paste_data_images: true,
menubar: 'file edit table tools',
valid_elements: 'h1,h2,h3',
valid_classes: {
'h1': 'title is-1',
'h2': 'title is-2',
'h3': 'title is-3',
'p': 'is-size-5 py-2',
}
}
);
After some digging, the class is actually in the html source code but not in the source code provided by TinyMCE.
The way to get it is to add extended_valid_elements: 'h1[*]',...
as explained in the post TinyMCE removes classes from <span> and <i> elements