问题
遇到一个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);
});
},
...
});