TinyMCE6自定义类未出现在HTML代码中问题求助

你的问题出在几处配置错误上，直接调整以下几点即可解决：

1. 修正valid_elements过滤规则 #

原来的valid_elements: 'h1,h2,h3'不仅漏掉了样式里用到的p标签，还没允许标签携带class属性，导致编辑器自动过滤掉了自定义类。需要修改为允许目标标签保留类属性：

valid_elements: 'h1[class],h2[class],h3[class],p[class]'

2. 替换旧版按钮配置参数 #

theme_advanced_buttons1是TinyMCE老版本的用法，TinyMCE6需要用toolbar来配置显示的按钮：

toolbar: 'styleselect'

3. 按需调整exact属性（可选） #

exact: true会强制移除目标标签上原有的其他类，只保留你指定的类。如果不需要这个强覆盖逻辑，可以删掉该属性；如果需要保留，确保过滤规则允许类存在即可。

修正后的完整初始化代码 #

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',
    toolbar: 'styleselect',
    language: 'fr_FR',
    paste_data_images: true,
    menubar: 'file edit table tools',
    valid_elements: 'h1[class],h2[class],h3[class],p[class]',
    valid_classes: {
        'h1': 'title is-1',
        'h2': 'title is-2',
        'h3': 'title is-3',
        'p': 'is-size-5 py-2',
    }
});

调整后，自定义类就能正常出现在输出的HTML代码中了。

内容的提问来源于stack exchange，提问作者8oris