tinymcetinymce-6

TinyMCE: custom Class missing in HTML Code


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

Solution

  • 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