TinyMCE 6.0.3中fontsizeselect工具栏选项不显示如何解决

数据老陈

2026-8-30

TinyMCE 6.0.3 fontsizeselect 工具栏选项不显示

问题描述

使用TinyMCE 6.0.3版本时，fontsizeselect选项无法在工具栏显示，初始化配置如下：

tinymce.init({
    selector: '#txtServiceDscr',
    menubar: false,        
    toolbar: 'fontsizeselect | forecolor'
});

同工具栏配置下的forecolor选项可以正常显示，浏览器控制台无任何报错信息，问题效果如下：
问题效果截图

问题原因

这个问题是TinyMCE 6.x早期版本（包含6.0.3）的逻辑变更导致，和5.x版本的默认行为不一致：

6.x版本调整了下拉选择类控件的渲染规则，fontsizeselect必须配置合法的可选值列表才会渲染，未配置时不会自动加载内置默认值，会直接静默隐藏控件，不会在控制台抛出任何错误
初始化配置中如果不显式声明plugins字段，部分非核心工具栏控件的注册逻辑不会触发，直接导致控件不渲染
如果是通过npm等包管理工具模块化引入TinyMCE，缺省图标、主题、皮肤依赖时，也会出现部分控件静默隐藏的情况

解决方法

按以下步骤调整即可：

补全初始化配置，显式声明插件列表和字号可选值，没有额外插件需求时plugins配置为空数组就行：

tinymce.init({
    selector: '#txtServiceDscr',
    menubar: false,
    // 显式声明插件列表，触发非核心控件的注册逻辑
    plugins: [],
    // 显式配置字号可选范围，可根据自己的业务需求调整
    fontsize_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt',
    toolbar: 'fontsizeselect | forecolor'
});

如果是模块化引入的TinyMCE，需要在入口文件补全必要的资源依赖，避免资源加载缺失：

// 引入TinyMCE核心
import tinymce from 'tinymce/tinymce';
// 补全默认图标、主题、皮肤资源
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/skins/ui/oxide/skin.min.css';