解决TinyMCE编辑器模态框触发的页面滚动禁用问题

方法1：直接覆写CSS类 #

这是最直接的处理方式，强制让页面body保持可滚动状态：

.tox-dialog__disable-scroll {
  overflow: auto !important;
}

如果TinyMCE自带的样式优先级更高，!important可以确保自定义样式生效。

方法2：通过TinyMCE事件手动控制 #

利用TinyMCE的弹窗生命周期事件，在弹窗打开时主动移除禁止滚动的类：

tinymce.init({
  // 你的编辑器配置项
  setup: function(editor) {
    // 弹窗打开时移除滚动限制类
    editor.on('DialogOpen', () => {
      document.body.classList.remove('tox-dialog__disable-scroll');
    });
    
    // 可选：弹窗关闭时恢复原状态（如果页面原本有滚动限制需求）
    editor.on('DialogClose', () => {
      // 根据业务需求，可选择重新添加该类或做其他处理
    });
  }
});

这种方式更灵活，能精准控制弹窗打开、关闭两个节点的页面滚动状态。

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