TinyMCE 编辑器实战：强制 PC 端启用移动端主题并优化滚动体验
在 Web 开发中，富文本编辑器是内容创作类产品的核心组件，TinyMCE 凭借其轻量、可定制的特性被广泛使用。但在跨端场景（如微信小程序 PC 版）中，TinyMCE 默认的 PC 端工具栏布局会导致体验不一致——PC 端工具栏换行挤压页面，而移动端工具栏横向滚动的交互更适配窄屏场景。本文将详细讲解如何让 TinyMCE 在 PC 端强制启用移动端主题，并解决 PC 端无触摸事件导致的工具栏滚动问题。
一、为什么要在 PC 端启用移动端主题？
TinyMCE 的主题适配逻辑是「设备识别」：默认仅移动端（手机/平板）会加载移动端主题，PC 端则展示传统多行工具栏。但在以下场景中，移动端主题的体验更优：
- 布局友好性 ：移动端主题的工具栏会横向排列，超出宽度时可滑动，不会像 PC 端那样换行，避免挤压编辑区域、破坏页面布局；
- 跨端体验统一 ：典型场景如微信小程序 PC 版——TinyMCE 会将其识别为 PC 端，导致同一套编辑器在小程序移动端和 PC 端呈现不同交互，用户体验割裂；
- 操作便捷性 ：移动端主题的工具栏聚焦核心功能，滑动操作比 PC 端多行工具栏更符合窄屏/紧凑布局的使用习惯。
二、核心配置：启用移动端工具栏模式
要让 PC 端用上移动端主题的核心特性，首先需配置 TinyMCE 的工具栏滚动模式，这是实现横向滚动的基础。
2.1 初始化参数配置
在 TinyMCE 的初始化配置中，添加 toolbar_mode: 'scrolling' 参数，该参数的作用是强制工具栏采用「滚动模式」（即移动端的横向滚动样式），而非 PC 端默认的「换行模式」。
// TinyMCE 初始化核心配置
tinymce.init({
selector: '#editor', // 编辑器挂载的 DOM 节点
toolbar_mode: 'scrolling', // 关键配置：启用滚动式工具栏
toolbar: 'undo redo | bold italic | link image | alignleft aligncenter alignright', // 自定义工具栏按钮
// 其他基础配置...
height: 400,
language: 'zh_CN'
});参数说明 ：
toolbar_mode: 'scrolling'：将工具栏设置为滚动模式，超出容器宽度时显示滚动效果（仅支持触摸事件）；toolbar：自定义需要展示的工具栏按钮，可根据业务需求调整。
三、解决 PC 端滚轮滚动问题
配置 toolbar_mode: 'scrolling' 后，工具栏仅支持移动端的 touch 触摸滑动事件，但 PC 端无触摸操作，需手动绑定鼠标滚轮事件，实现 PC 端用滚轮横向滚动工具栏。
3.1 初始化后绑定自定义方法
在 TinyMCE 的 setup 钩子中，调用自定义的 mobileToolbarSet 方法，该钩子会在编辑器初始化完成后执行，确保能获取到工具栏 DOM 节点。
tinymce.init({
selector: '#editor',
toolbar_mode: 'scrolling',
toolbar: 'undo redo | bold italic | link image | alignleft aligncenter alignright',
height: 400,
language: 'zh_CN',
// 编辑器初始化完成后的钩子函数
setup: editor => {
// 调用自定义方法，绑定滚轮事件
this.mobileToolbarSet();
}
});钩子说明 ：
setup：TinyMCE 的生命周期钩子，在编辑器实例创建完成后触发，适合绑定自定义事件/逻辑；this.mobileToolbarSet()：调用下文定义的方法，需确保this指向正确（Vue/React 中注意作用域）。
3.2 实现滚轮事件绑定方法
mobileToolbarSet 方法的核心逻辑是：获取工具栏 DOM 节点，绑定鼠标滚轮事件，将纵向滚轮操作转为横向滚动，并阻止默认的页面滚动行为。
/**
* 为 PC 端绑定工具栏滚轮事件，实现横向滚动
*/
mobileToolbarSet() {
// 获取 TinyMCE 工具栏的 DOM 节点（核心类名：tox-toolbar）
let toolbar = document.querySelector('.tox-toolbar');
// 容错处理：若首次未获取到 DOM（编辑器渲染延迟），300ms 后重试
if (toolbar) {
// 绑定鼠标滚轮事件
toolbar.addEventListener(
'wheel',
function (e) {
// 1. 阻止默认纵向滚动行为（避免滚轮操作导致整个页面滚动）
e.preventDefault();
// 2. 将滚轮的纵向偏移量（deltaY）转为横向滚动距离
// deltaY > 0：向下滚动滚轮 → 工具栏向右滚动
// deltaY < 0：向上滚动滚轮 → 工具栏向左滚动
// 1.5 是滚动速度系数，可根据需求调整（越大滚动越快）
toolbar.scrollBy({
left: e.deltaY * 1.5,
behavior: 'smooth' // 平滑滚动，提升体验
});
},
{ passive: false } // 必须设为 false，才能生效 e.preventDefault()
);
} else {
// 递归重试：解决编辑器异步渲染导致的 DOM 获取不到问题
setTimeout(this.mobileToolbarSet, 300);
}
}核心逻辑拆解 ：
- DOM 节点获取 ：通过
.tox-toolbar类名获取工具栏节点（TinyMCE 的工具栏固定类名）； - 容错重试 ：若首次获取不到节点（编辑器渲染有延迟），通过
setTimeout300ms 后重试，确保兼容性； - 滚轮事件绑定 ：
wheel事件：监听鼠标滚轮操作，替代移动端的touch事件；e.preventDefault()：阻止默认的页面纵向滚动，避免操作工具栏时页面跟着滚动；scrollBy：实现横向滚动，left参数由e.deltaY（滚轮纵向偏移量）转化而来，behavior: 'smooth'实现平滑滚动；
- passive: false ：必须设置该参数，否则
e.preventDefault()会失效（浏览器默认passive: true以提升性能）。
四、完整代码示例
将上述配置整合，得到可直接运行的完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>TinyMCE PC 端启用移动端主题</title>
<!-- 引入 TinyMCE 核心库 -->
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<!-- 编辑器挂载节点 -->
<textarea id="editor"></textarea>
<script>
// 初始化编辑器
tinymce.init({
selector: '#editor',
toolbar_mode: 'scrolling',
toolbar: 'undo redo | bold italic | link image | alignleft aligncenter alignright',
height: 400,
language: 'zh_CN',
setup: editor => {
mobileToolbarSet(); // 绑定滚轮事件
}
});
// 滚轮事件绑定方法
function mobileToolbarSet() {
let toolbar = document.querySelector('.tox-toolbar');
if (toolbar) {
toolbar.addEventListener(
'wheel',
function (e) {
e.preventDefault();
toolbar.scrollBy({
left: e.deltaY * 1.5,
behavior: 'smooth'
});
},
{ passive: false }
);
} else {
setTimeout(mobileToolbarSet, 300);
}
}
</script>
</body>
</html>五、注意事项
- 类名兼容性 ：TinyMCE 不同版本的工具栏类名可能略有差异（如旧版本为
.mce-toolbar），需根据实际版本调整querySelector的选择器； - 作用域问题 ：在 Vue/React 等框架中使用时，需注意
this的指向，可通过箭头函数或bind绑定作用域； - 滚动速度调整 ：
1.5是滚动速度系数，可根据用户体验调整（建议范围 1-2）； - 浏览器兼容性 ：
scrollBy的behavior: 'smooth'在低版本浏览器（如 IE）中不生效，可移除该参数降级为普通滚动。
总结
- 核心目标：通过
toolbar_mode: 'scrolling'让 PC 端启用 TinyMCE 移动端横向滚动工具栏，解决跨端体验不一致问题； - 关键优化：为 PC 端补充鼠标滚轮事件绑定，将纵向滚轮操作转为工具栏横向滚动，替代移动端的触摸事件；
- 容错处理：通过重试机制解决编辑器异步渲染导致的 DOM 获取失败问题，确保功能稳定。
该方案既保留了移动端主题的布局优势，又适配了 PC 端的操作习惯，可直接应用于小程序 PC 版、窄屏 PC 端等跨端场景，提升 TinyMCE 编辑器的跨端使用体验。
