【问题记录】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);
        });
    },
    ...
});
相关推荐
liangshanbo12153 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
_院长大人_6 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD6 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~6 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
阿珊和她的猫7 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
爱看书的小沐8 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586548 小时前
Threejs入门学习笔记
javascript·笔记·学习
浪裡遊9 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
課代表9 小时前
JavaScript 二维数组的三种定义与初始化方法
javascript·初始化·二维数组·多维数组·动态数组·循环遍历·数组合并
鸡吃丸子10 小时前
Next.js 入门指南
开发语言·javascript·next.js