页面出现滚动条,Tinymce下拉框位置偏移问题

336 阅读1分钟

问题:在vue2项目引入Tinymce,出现页面滚动条,点击富文本的下拉菜单。如下图弹出框会偏移。

Snipaste_2024-09-10_16-18-25.png

解决方案:在html和body标签设置overfolw:hidden,在页面的最外层标签给一个overflow-y:auto。 同时在tinymce.init的时候传入对应的参数。

image.png

        setup(editor) {
              editor.on('init', function() {
                  const container = editor.getContainer();
                  const toxContainer = document.querySelector('body > .tox.tox-tinymce-aux');
                  container.parentNode.appendChild(toxContainer);
              });
          }

解决后:


image.png