【问题记录】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);
        });
    },
    ...
});
相关推荐
汪子熙1 小时前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪1 小时前
单点登录全流程小姐
前端·javascript·面试
y东施效颦2 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
秋田君2 小时前
深入理解JavaScript设计模式之单例模式
javascript·单例模式·设计模式
摸鱼仙人~2 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客2 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
前端小咸鱼一条3 小时前
Vue中渲染函数的使用
javascript·vue.js·ecmascript
郑州小张3 小时前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript
这是个栗子3 小时前
HTML(一)
javascript·ajax·css3·html5
uhakadotcom3 小时前
Python中@staticmethod和@classmethod的简单理解与实用示例
javascript·后端