【问题记录】tinyMCE工具栏弹窗滚动页面定位不正确问题处理

问题

遇到一个dialog弹窗中tinyMCE富文本组件的操作栏在页面滚动时的展示问题。操作栏弹窗位置没有跟随富文本组件进行跟随滚动,而是固定不动,展示存在问题。

排查

tinyMCE在项目不是第一次使用。比较了正常展示的页面后,发现了两者的差异,正常的是在主页面中进行使用,现在发现问题的是在dialog弹窗中。 对页面元素进行检查发现,承载操作栏的div父节点都是挂载在html.body下面:

发现问题,当在dialog中使用tinyMCE时,操作栏在做绝对定位,是在相对html.body下的父级元素做定位,导致在dialog中滚动时无法做到准确的位置计算。

解决

在编辑器初始化完成后将操作栏父级节点从html.body移至与编辑器同级节点

js 复制代码
tinyMCE.init({
    ...,
    setup: function(editor) {
        editor.on('init', function() {
            const container = editor.getContainer();
            const toxContainer = document.querySelector('body > .tox.tox-tinymce-aux');
            container.parentNode.appendChild(toxContainer);
        });
    },
    ...
});
相关推荐
Mintopia1 小时前
实时 AIGC:Web 端低延迟生成的技术难点与突破
前端·javascript·aigc
Mintopia1 小时前
Next.js 性能优化双绝:Image 与 next/font 的底层修炼手册
前端·javascript·next.js
小菜全1 小时前
使用UniApp实现下拉框和表格组件页面
开发语言·前端·javascript·elementui·前端框架·html
傻梦兽2 小时前
2025年,跟 encodeURIComponent() 说再见吧
前端·javascript
Lingxing2 小时前
事件流:深入理解事件冒泡、事件捕获与事件委托
前端·javascript·面试
San302 小时前
JavaScript 入门精要:从变量到对象,构建稳固基础
javascript·面试·html
bug_kada2 小时前
深入理解事件捕获与冒泡(详细版)
前端·javascript
小妖6663 小时前
怎么用 tauri 创建一个桌面应用程序(Electron)
前端·javascript·electron
EndingCoder3 小时前
单元测试:Jest 与 Electron 的结合
javascript·electron·单元测试·前端框架