如何移除TinyMCE style_formats菜单中的body样式？

我之前也碰到过一模一样的情况——TinyMCE默认会自动扫描你配置的content_css里的样式，把符合条件的选择器都加到style_formats菜单里，包括那些只给body用的类，这些类没法被选中，只会把菜单搞得乱糟糟的。下面给你几个实用的解决办法：

方法1：过滤掉body相关的选择器 #

你可以用importcss_selector_filter参数指定哪些选择器能被导入，直接排除body的类就好：

tinymce.init({
  // 你的其他配置项...
  content_css: 'path/to/your/styles.css',
  importcss_selector_filter: 'not(body)' // 排除所有body的选择器
});

如果需要更精确，也可以直接列出你允许导入的类选择器，比如：

importcss_selector_filter: '.text-primary, .bg-light, .custom-heading'

方法2：完全禁用自动导入的样式追加 #

如果你已经自定义了完整的style_formats，不想让TinyMCE自动导入任何外部样式，只显示你自己定义的内容，可以设置importcss_append: false：

tinymce.init({
  // 你的其他配置项...
  style_formats: [
    { title: '自定义标题1', block: 'h2', classes: 'custom-h2' },
    { title: '高亮文本', inline: 'span', styles: { backgroundColor: '#ffff00' } }
    // 你的其他自定义样式
  ],
  importcss_append: false
});

这样style_formats菜单里就只会显示你手动配置的样式，不会出现任何自动导入的内容。

方法3：直接排除指定选择器 #

还可以用importcss_exclude参数明确指定要排除的选择器，针对body类的话这样写：

tinymce.init({
  // 你的其他配置项...
  importcss_exclude: 'body'
});

这几个方法在TinyMCE 6.5版本里都是完全支持的，你可以根据自己的需求选一个最适合的试试~

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