如何禁用TinyMCE自动添加的内联样式，防止其覆盖自定义CSS

我正在使用^5.10.5版本的TinyMCE设置内容样式，已添加自定义CSS文件，但导出内容始终带有含内联CSS的span标签，会覆盖自定义样式，示例如下：

<span style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; text-align: justify; background-color: #ffffff;">

我的初始化代码：

tinymce.init({
    selector: '#section-' + sectionIdentifier + ' textarea',
    content_css: "/build/app.css",
    plugins: ["lists", "table", "code"],
    menubar: false,
    toolbar: 'undo redo | styleselect forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | code removeformat |',
    branding: false,
});

要避免内联样式覆盖自定义CSS，核心是让TinyMCE生成CSS类名而非内联样式，具体配置如下：

1. 定义自定义样式映射 #

在初始化代码中添加style_formats，将编辑器工具栏的样式选项映射到你自定义CSS中的类。比如对应Open Sans字体、对齐样式：

style_formats: [
    { title: 'Open Sans 14px', inline: 'span', classes: 'open-sans-14' },
    { title: '两端对齐', block: 'p', classes: 'text-justify' },
    // 可按需添加更多自定义样式（如其他字体、字号）
]

2. 禁用自动内联样式生成 #

添加inline_styles: false，阻止TinyMCE自动生成内联style属性：

inline_styles: false,

3. 让对齐按钮生成CSS类 #

添加formats配置，将工具栏的对齐按钮映射到自定义CSS类，替代默认的内联样式：

formats: {
    alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', classes: 'text-left' },
    aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', classes: 'text-center' },
    alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', classes: 'text-right' },
    alignjustify: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', classes: 'text-justify' },
}

4. 清理残留内联样式 #

配置removeformat规则，确保导出内容时清除多余的内联样式：

removeformat: [
    { selector: 'span', remove: 'all', split: true, expand: false, block_expand: true, deep: true },
    { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: 'text-align,font-family,font-size,background-color' }
]

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

tinymce.init({
    selector: '#section-' + sectionIdentifier + ' textarea',
    content_css: "/build/app.css",
    plugins: ["lists", "table", "code"],
    menubar: false,
    toolbar: 'undo redo | styleselect forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | code removeformat |',
    branding: false,
    // 新增配置
    inline_styles: false,
    style_formats: [
        { title: 'Open Sans 14px', inline: 'span', classes: 'open-sans-14' },
        { title: '两端对齐', block: 'p', classes: 'text-justify' }
    ],
    formats: {
        alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', classes: 'text-left' },
        aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', classes: 'text-center' },
        alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', classes: 'text-right' },
        alignjustify: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', classes: 'text-justify' },
    },
    removeformat: [
        { selector: 'span', remove: 'all', split: true, expand: false, block_expand: true, deep: true },
        { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: 'text-align,font-family,font-size,background-color' }
    ]
});

对应自定义CSS示例 #

在/build/app.css中添加匹配的类：

.open-sans-14 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    background-color: #ffffff;
}
.text-justify { text-align: justify; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

内容的提问来源于stack exchange，提问作者Anton Shumin