TinyMCE: custom Class missing in HTML Code

23 Views Asked by At

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',
 }
}
);
1

There are 1 best solutions below

0
8oris On BEST ANSWER

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