TinyMCE 5.2.2 移动端优化实践：让 formatselect 变成一个真正可用的按钮
在移动端富文本编辑场景中，工具栏空间始终是最紧张的资源之一。尤其是在使用 TinyMCE v5.2.2 时， formatselect （段落/标题选择器）默认呈现为一个较宽的下拉控件，占据了明显的横向空间。
本文围绕 TinyMCE 5.2.2 在移动端的实际使用场景，系统整理如何将 formatselect 优化为一个紧凑的按钮形式，同时保持原生下拉交互逻辑不变。
一、问题背景
在 TinyMCE 5.2.2 中：
formatselect默认显示当前块级格式（如 Paragraph、Heading 1 等）- 组件带有文字标签与下拉箭头
- 最小宽度较大
- 在 mobile toolbar 下仍然占据显著空间
在移动端（尤其 375px 宽度设备）下，多个按钮并排时， formatselect 会显得格外“臃肿”，直接影响整体布局。
二、核心思路
优化目标非常明确：
- 保留官方
formatselect行为 - 保持下拉菜单逻辑
- 缩减视觉宽度
- 提升移动端空间利用率
实现方式不涉及重写组件逻辑，而是通过样式层优化 UI 表现。
三、基础初始化配置（v5.2.2）
tinymce.init({
selector: '#editor',
menubar: false,
toolbar: 'formatselect bold italic',
mobile: {
toolbar: 'formatselect bold italic'
}
});这里保持 formatselect 原生存在，不做功能替换。
四、移动端样式压缩方案
通过 CSS 精准控制 select 按钮尺寸：
@media (max-width: 768px) {
/* 控制整体宽度 */
.tox .tox-tbtn--select {
min-width: 36px !important;
width: 36px !important;
padding: 0 !important;
}
/* 隐藏文字标签 */
.tox .tox-tbtn__select-label {
display: none !important;
}
/* 调整箭头位置 */
.tox .tox-tbtn__select-chevron {
margin: 0 auto !important;
}
}优化效果
原始状态：
[ Paragraph ▼ ]压缩后：
[ ▼ ]视觉体积缩小约 60% 以上，同时保持点击弹出官方菜单。
五、图标按钮化方案（可选视觉优化）
如果希望进一步强化按钮感，可以移除箭头，仅保留固定字符：
@media (max-width: 768px) {
.tox .tox-tbtn--select::before {
content: "H";
font-weight: bold;
}
.tox .tox-tbtn__select-label {
display: none !important;
}
.tox .tox-tbtn__select-chevron {
display: none !important;
}
}显示效果：
[ H ]功能仍然调用官方 formatselect 菜单。
六、关于自定义按钮方案
TinyMCE 允许通过 editor.ui.registry.addMenuButton() 自定义菜单按钮，实现完全控制的样式与菜单结构。
但在 v5.2.2 场景下，若仅为压缩 UI 空间，不涉及菜单结构重构，使用 CSS 调整更为直接与稳定。
七、移动端工具栏优化原则
在移动端编辑器设计中，有三个关键点：
- 避免固定宽度组件
- 减少文字型工具按钮
- 优先使用图标化表达
formatselect 的按钮化，本质是将“文本控件”转为“图标控件”。
在小屏设备上，这种策略能明显提升整体排版紧凑度。
八、总结
在 TinyMCE 5.2.2 中：
formatselect不需要重写- 不需要替换为自定义 menuButton
- 仅通过样式即可完成移动端空间优化
最终实现：
- 保留原生逻辑
- 保持官方交互
- 显著缩减工具栏占用空间
在实际项目中，这种方式既稳定，又不会引入额外维护成本，是移动端 TinyMCE 优化的高性价比方案。
